 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Hennee
Threadersteller
Dabei seit: 15.11.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 15.11.2008 13:32
Titel Dropdown Box mit Rollover |
  |
|
Hallo Community :],
bin durch die Google Suche auf euch gestoßen, da dieses Thema hier schon einige male bearbeitet wurde, dachte ich, gibt es bestimmt jemanden hier, der mir helfen kann.
Ich möchte auf meiner Seite eine Dropdown Box erstellen. Im moment besteht die Navigation aus einem Rollover Bild. Da ich aber noch Unterkategorien einordnen möchte, wäre eine Dropdownbox einfach perfekt.
Der Code für meine Rolloverbilder sieht so aus:
| Code: |
<?php
?>
<head>
<title>navi</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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];}
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('//Pfad///navi_over_01.jpg','//Pfad///navi_over_03.jpg','//Pfad///navi_over_07.jpg','//Pfad///navi_over_09.jpg','//Pfad///navi_over_11.jpg','//Pfad///navi_over_13.jpg','images/navi/navi_05.jpg')">
<a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','navi01','//Pfad///navi_over_09.jpg',1)" onMouseOver="MM_nbGroup('over','navi01','//Pfad///navi_over_01.jpg','//Pfad///navi_05.jpg',1)" onMouseOut="MM_nbGroup('out')"></a><a href="http://www.seitenname.in/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','//Pfad///navi_over_01.jpg',0)"><img src="//Pfad///navi_01.jpg" name="Image14" width="75" height="36" border="0"></a><a href="http://www.seitenname.in/"></a><a href="http://www.seitenname.in/category/own-content/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','//Pfad///navi_over_03.jpg',1)"><img src="//Pfad///navi_03.jpg" name="Image3" width="132" height="36" border="0"></a><a href="http://www.seitenname.in/category/videos/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','//Pfad///navi_over_05.jpg',0)"><img src="//Pfad///navi_05.jpg" name="Image5" width="75" height="36" border="0"></a><a href="http://www.seitenname.in/category/picdumps/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','//Pfad///navi_over_07.jpg',1)"><img src="//Pfad///navi_07.jpg" name="Image7" width="75" height="36" border="0"></a><a href="http://www.seitenname.in/category/flash/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','//Pfad///navi_over_09.jpg',1)"><img src="//Pfad///navi_09.jpg" name="Image9" width="75" height="36" border="0"></a><a href="http://www.seitenname.in/category/allgemein/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','//Pfad///navi_over_11.jpg',1)"><img src="//Pfad///navi_11.jpg" name="Image11" width="75" height="36" border="0"></a><a href="http://www.seitenname.in/partneralle" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','//Pfad///navi_over_13.jpg',1)"><img src="//Pfad///navi_13.jpg" name="Image13" width="75" height="36" border="0"></a><img src="//Pfad///navi_02.jpg" width="10" height="36"><img src="//Pfad///navi_04.jpg" width="10" height="36"><img src="//Pfad///navi_06.jpg" width="10" height="36"><img src="//Pfad///navi_08.jpg" width="10" height="36"><img src="//Pfad///navi_10.jpg" width="10" height="36"><img src="//Pfad///navi_12.jpg" width="10" height="36"><img src="//Pfad///navi_14.jpg" width="138" height="36">
</body>
</html>}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('//Pfad///navi_over_01.jpg','//Pfad///navi_over_03.jpg','//Pfad///navi_over_07.jpg','//Pfad///navi_over_09.jpg','//Pfad///navi_over_11.jpg','//Pfad///navi_over_13.jpg','images/navi/navi_05.jpg')">
<a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','navi01','//Pfad///navi_over_09.jpg',1)" onMouseOver="MM_nbGroup('over','navi01','//Pfad///navi_over_01.jpg','//Pfad///navi_05.jpg',1)" onMouseOut="MM_nbGroup('out')"></a><a href="http://www.kranked.in/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','//Pfad///navi_over_01.jpg',0)"><img src="//Pfad///navi_01.jpg" name="Image14" width="75" height="36" border="0"></a><a href="http://www.kranked.in/"></a><a href="http://www.kranked.in/category/own-content/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','//Pfad///navi_over_03.jpg',1)"><img src="//Pfad///navi_03.jpg" name="Image3" width="132" height="36" border="0"></a><a href="http://www.kranked.in/category/videos/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','//Pfad///navi_over_05.jpg',0)"><img src="//Pfad///navi_05.jpg" name="Image5" width="75" height="36" border="0"></a><a href="http://www.kranked.in/category/picdumps/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','//Pfad///navi_over_07.jpg',1)"><img src="//Pfad///navi_07.jpg" name="Image7" width="75" height="36" border="0"></a><a href="http://www.kranked.in/category/flash/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','//Pfad///navi_over_09.jpg',1)"><img src="//Pfad///navi_09.jpg" name="Image9" width="75" height="36" border="0"></a><a href="http://www.kranked.in/category/allgemein/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','//Pfad///navi_over_11.jpg',1)"><img src="//Pfad///navi_11.jpg" name="Image11" width="75" height="36" border="0"></a><a href="http://www.kranked.in/partneralle" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','//Pfad///navi_over_13.jpg',1)"><img src="//Pfad///navi_13.jpg" name="Image13" width="75" height="36" border="0"></a><img src="//Pfad///navi_02.jpg" width="10" height="36"><img src="//Pfad///navi_04.jpg" width="10" height="36"><img src="//Pfad///navi_06.jpg" width="10" height="36"><img src="//Pfad///navi_08.jpg" width="10" height="36"><img src="//Pfad///navi_10.jpg" width="10" height="36"><img src="//Pfad///navi_12.jpg" width="10" height="36"><img src="//Pfad///navi_14.jpg" width="138" height="36">
</body>
</html>
|
Das habe ich mir Dreamweaver soweit auch ganz ordentlich hingekriegt und alles funktioniert. Wie baue ich jetzt eine ordentliche Dropdown Box ein? Ich habe auch nochmal ein Screenshot gemacht, dann kann jeder sehen wie genau ich mir das vorstelle (ist mit Photoshop erstellt, Normalerweise wäre der Menüpunkt "Pics" dort in einer anderen Farbe, wegen dem Rollover-Effekt):
http://img3.imagebanana.com/img/mrkcj4h/Unbenannt.JPG
Ich hoffe ihr könnt mir helfen!
lG
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Sa 15.11.2008 13:44
Titel
|
|
|
Und weil es das Thema hier schon so häufig gab, findest du auch Lösungen für dein Problem wenn du nochmal die Suche nutzt. 
|
|
| |
 |
|
|
Anzeige
|
|
|
Hennee
Threadersteller
Dabei seit: 15.11.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 15.11.2008 13:47
Titel
|
|
|
|
Nie in verbindung mit Rollover, ich wüsste auch nicht genau wie ich das einbinden kann/soll. Deshalb bräuchte ich schon was spezielles. Ich hoffe, das ist kein Problem!
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Sa 15.11.2008 13:50
Titel
|
|
|
evtl sucht du ja so etwas.
diese menüs kannst du anpassen, falls es unbedingt images sein müßen.
http://www.cssplay.co.uk/menus/dd_valid.html
// oder siehe links von m
Zuletzt bearbeitet von Kash am Sa 15.11.2008 13:51, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Hennee
Threadersteller
Dabei seit: 15.11.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 15.11.2008 14:37
Titel
|
|
|
|
Vielen Dank! Das Dropdown Menü habe ich mit Fireworks hinbekommen, nur Funktioniert der Rollover Effekt jetzt nicht mehr, ich hoffe, dass ihr mir da noch helfen könnt wie ich den da wieder rein bekomme :p
|
|
| |
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Sa 15.11.2008 14:42
Titel
|
|
|
|
kannst du bitte mal einen Link zu einem onlinebeispiel posten
|
|
| |
|
|
Hennee
Threadersteller
Dabei seit: 15.11.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 15.11.2008 15:21
Titel
|
|
|
|
Im Prinzip muss ich nurnoch rausfinden, wie man einen Rollover effekt mit Fireworks erstellt, dann habe ich alles. Das Popdown menü hat geklappt, aber der Rollover effekt wenn man mit der Maus drüber fährt ist weg, den kann man aber bestimmt wieder kriegen mit Fireworks oder?
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[Javascript][CSS] JavaScrip-Rollover-Bild in CSS-Dropdown
Nach Dropdown auswahl neues Dropdown erscheinen
CSS Dropdown
Dropdown standart!
Dropdown Menü
dropdown linkliste
|
|
|
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.
|
|
