Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
Dietahhh
Threadersteller
Dabei seit: 09.07.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 10.07.2008 11:03
Titel [Javascript][CSS] JavaScrip-Rollover-Bild in CSS-Dropdown |
|
|
tach miteinander,
ich bin blutiger CSS-anfänger und nun beim bauen einer seite an meine grenzen gekommen. und zwar habe ich ein menü umgesetzt, bei dem die ersten beiden punkte (horizontal und als bilder unmgesetzt) als dropdown fungieren sollen. ich hab mir dafür aus dem netz ein vorgefertigtes css-script besorgt, welches ich leicht abgeändert habe. da der internet explorer diesen code nicht verarbeiten kann, gab es zusätzlich einen alternativ-code der als "coditional comment" mit verweis auf eine extra css-datei in die html-datei eingebunden wird. das funktioniert auch alles wunederbar, bis an den punkt, wo die menünkte zusätzlich als (in javascript umgesetztes) rollover-bild fungieren sollen. bei den "normalen" css-eigenschaften für firefox und co. war das kein problem, doch wie verbinde ich den java-befehl mit dem alternativen IE-conditional-comment-code? ich poste einfach mal die codes, vielleicht sieht ja jemand gleich den problembereich. falls irgendetwas codetechnisch unlogisch ist, bin ich gerne für kritik offen!
vielen dank und gruss,
dieter
hier die codes (als platzhalter links habe ich überall www.google.de eingegeben, also nicht wundern):
index.html:
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="../css/fix-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body onload="MM_preloadImages('../images/menue_leistungen_over.jpg','../images/menue_ueberuns_over.jpg','../images/menue_service_over.jpg','../images/menue_kontakt_over.jpg','../images/menue_team_over.jpg','../images/menue_team_mit_over.jpg','../images/menue_operationen_over.jpg','../images/menue_operationen_ar_over.jpg','../images/menue_operationen_of_over.jpg')">
<div id="header">
<div id="bewegung"><img src="../images/index_fuereinleben.gif" width="580" height="110" /></div>
<div id="logo"><img src="../images/index_logo.jpg" width="289" height="110" /></div>
</div>
<div id="menu">
<div id="menu_leistungen"><a href="http://www.google.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Leistungen','','../images/menue_leistungen_over.jpg',1)"><img src="../images/menue_leistungen.jpg" alt="Leistungen" name="Leistungen" width="170" height="30" border="0" id="Leistungen" /></a></div>
<div id="menu_ueberuns"><a href="http://www.google.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Über uns','','../images/menue_ueberuns_over.jpg',1)"><img src="../images/menue_ueberuns.jpg" alt="Über uns" name="Über uns" width="170" height="30" border="0" id="Über uns" /></a></div>
<div id="menu_service"><a href="http://www.google.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Service','','../images/menue_service_over.jpg',1)"><img src="../images/menue_service.jpg" alt="Service" name="Service" width="170" height="30" border="0" id="Service" /></a></div>
<div id="menue_kontakt"><a href="http://www.google.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakt','','../images/menue_kontakt_over.jpg',1)"><img src="../images/menue_kontakt.jpg" alt="Kontakt" name="Kontakt" width="170" height="30" border="0" id="Kontakt" /></a></div>
</div>
<div id="content"></div>
<div id="footer"><img src="../images/index_fuss.gif" width="1022" height="30" hspace="0" vspace="0" align="left" /></div>
<div id="menue">
<div class="aussen"><a href="http://www.google.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Das Team','','../images/menue_team_over.jpg',1)"><img src="../images/menue_team.jpg" alt="Das Team" name="Das Team" width="170" height="30" border="0" id="Das Team" /></a><a href="http://www.google.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Mitarbeiter','','../images/menue_team_mit_over.jpg',1)"><img src="../images/menue_team_mit.jpg" alt="Mitarbeiter" name="Mitarbeiter" width="150" height="30" border="0" id="Mitarbeiter" /></a></div>
<div class="aussen"><a href="http://www.google.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Operationen','','../images/menue_operationen_over.jpg',1)"><img src="../images/menue_operationen.jpg" alt="Operationen" name="Operationen" width="170" height="30" border="0" id="Operationen" /></a><a href="http://www.google.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('arthroskopisch','','../images/menue_operationen_ar_over.jpg',1)"><img src="../images/menue_operationen_ar.jpg" alt="arthroskopisch" name="arthroskopisch" width="150" height="30" border="0" id="arthroskopisch" /></a><a href="http://www.google.de" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('offen','','../images/menue_operationen_of_over.jpg',1)"><img src="../images/menue_operationen_of.jpg" alt="offen" name="offen" width="150" height="30" border="0" id="offen" /></a></div>
</div>
<!--[if IE]>
<div class="stupidie">
<a class="auss" href="http://www.google.de"><span class="menutag"><img src="../images/menue_team.jpg" width="170" height="30" /></span>
<table><tr><td>
<a class="inn" href="http://www.google.de"><img src="../images/menue_team_mit.jpg" width="150" height="30" /></a>
</td></tr></table>
</a>
<a class="auss" href="http://www.google.de"><span class="menutag"><img src="../images/menue_operationen.jpg" width="170" height="30" /></span>
<table><tr><td>
<a class="inn" href="http://www.google.de"><img src="../images/menue_operationen_ar.jpg" width="150" height="30" /></a>
<a class="inn" href="http://www.google.de"><img src="../images/menue_operationen_of.jpg" width="150" height="30" /></a>
</td></tr></table>
</a>
</div><!-- stupidie -->
<![endif]-->
</body>
</html>
|
"normale" CSS-Datei (style.css):
Code: |
@charset "UTF-8";
/* CSS Document */
body {
background-color: #f0ede9;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a img {
border : 0 none;
}
/* Kopfzeile mit Animation und Logo */
#header {
position:absolute;
left:15px;
top:15px;
width:1024px;
height:110px;
z-index:1;
background-color: #FFFFFF;
}
#logo {
background-color: #FFFFFF;
height: 110px;
width: 289px;
position: absolute;
top: 0px;
right: 0px;
}
#bewegung {
background-color: #FFFFFF;
padding: 0px;
height: 110px;
width: 580px;
position: absolute;
left: 0px;
top: 0px;
}
/* Menü */
#menu {
position:absolute;
left:15px;
top:125px;
width:1024px;
height:30px;
z-index:2;
background-color: #af032b;
}
/* Menüpunkte */
#menu_leistungen {
height: 30px;
width: 170px;
position: absolute;
left: 340px;
top: 0px;
}
#menu_ueberuns {
position: absolute;
left: 510px;
top: 0px;
width: 170px;
height: 30px;
}
#menu_service {
height: 30px;
width: 170px;
position: absolute;
left: 680px;
top: 0px;
}
#menue_kontakt {
height: 30px;
width: 170px;
position: absolute;
left: 850px;
top: 0px;
}
/* Inhalt */
#content {
position:absolute;
left:15px;
top:155px;
width:1024px;
height:525px;
z-index:3;
background-color: #FFFFFF;
}
/* Fusszeile mit Adresse */
#footer {
position:absolute;
left:15px;
top:680px;
width:1024px;
height:30px;
z-index:4;
background-color: #77675b;
}
/* Dropdown-Menü */
#menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 125px;
left: 15px;
z-index: 200;
width: 340px;
}
#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 170px;
height: 30px;
}
#menue .aussen:hover {
height: auto;
}
span.menutag {
display: block;
cursor: default;
}
|
Alternative CSS-Datei für IE (fix-ie.css):
Code: |
@charset "UTF-8";
/* CSS Document */
#menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
top: 125px;
left: 15px;
z-index: 200;
}
a.auss {
float: left;
width: 170px;
height: 30px;
overflow: hidden;
display: block;
}
a:hover.auss {
overflow: visible;
background-color: #af032b;
}
a:hover.auss table {
display: block;
margin-top: 0 px;
border-collapse: collapse;
}
span.menutag {
display: block;
cursor: default;
}
|
|
|
|
|
|
plusplus
Dabei seit: 03.01.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 10.07.2008 11:22
Titel
|
|
|
Warum benutzt du für dein Menüs keine Liste? <ul><li> formatieren ("display-inline" für eine gerade Liste)
und diese mit Backrounds belegen die auf "background-postion" left center positioniert werden.
"background-image" NICHT "list-style-image".
Du benutzt für jede Menüspalte ein DIV...umständlich
gruß
|
|
|
|
|
Anzeige
|
|
|
Dietahhh
Threadersteller
Dabei seit: 09.07.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 10.07.2008 11:32
Titel
|
|
|
okay, danke erstmal für dein feedback. die listenfunktion war mir nicht bekannt... allerdings ist es auch so, dass nur die ersten zwei menüpunkte als dropdown funktionieren, ich wüsste jetzt nicht genau wie ich das mit der listenfunktion kombinierren kann... letztendlich funktionierts aber ja auch mit der einzel-div-methode, richtig? ich werde das mit den listen nochma abchecken, ich wäre allerdings dankbar für einen ansatz zu dem javascript-rollover innerhalb des IE-CSS!
danke und gruss,
dieter
edit: falls das ein ansatz zur alternativ-lösung eines rollovers in css ist, könntest du mir das anhand meines codes genauer begreiflich machen? sorry, bin absolut unfit was das angeht....
vielen dank
Zuletzt bearbeitet von Dietahhh am Do 10.07.2008 11:34, insgesamt 1-mal bearbeitet
|
|
|
|
|
plusplus
Dabei seit: 03.01.2007
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 10.07.2008 11:59
Titel
|
|
|
Ich habe dir einen Ansatzpunkt gezeigt, am schnellsten kann dir da nur google helfen
oder das vielleicht:
klickmich
|
|
|
|
|
Dietahhh
Threadersteller
Dabei seit: 09.07.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 10.07.2008 12:03
Titel
|
|
|
okay, den link kenne ich bereits.
es ist mir allerdings nicht klar, wie ich das mit den vorhandenen bildern realisieren soll?!?
hat noch jemand einen ansatz ohne mein menü neu aufzubauen?
gruss,
dieter
|
|
|
|
|
|
|
|
Ähnliche Themen |
Dropdown Box mit Rollover
[JavaScript] 2 Dropdown Menüs
JavaScript-Dropdown-Menü
CSS Javascript Dropdown menü
Probleme mit Dropdown-Menü (Javascript)
mein Problem: CSS/JavaScript-DropDown-Navigation
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|