mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 19.03.2024 03:40 Benutzername: Passwort: Auto-Login

Thema: [Javascript][CSS] JavaScrip-Rollover-Bild in CSS-Dropdown vom 10.07.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [Javascript][CSS] JavaScrip-Rollover-Bild in CSS-Dropdown
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

Antworten mit Zitat Zum Seitenanfang

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;
}
  View user's profile Private Nachricht senden
plusplus

Dabei seit: 03.01.2007
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 10.07.2008 11:22
Titel

Antworten mit Zitat Zum Seitenanfang

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ß
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Dietahhh
Threadersteller

Dabei seit: 09.07.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 10.07.2008 11:32
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
plusplus

Dabei seit: 03.01.2007
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 10.07.2008 11:59
Titel

Antworten mit Zitat Zum Seitenanfang

Ich habe dir einen Ansatzpunkt gezeigt, am schnellsten kann dir da nur google helfen
oder das vielleicht:

klickmich
  View user's profile Private Nachricht senden
Dietahhh
Threadersteller

Dabei seit: 09.07.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 10.07.2008 12:03
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


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.