Untermenü erstellen das mit mouseover wechselt

ZillAru$ · 5. August 2006

Hi Leutz

Soo wie fang ich am besten an.Also ich hab ne neue page gemacht die ich mit verschiedenen unterkategorien untergliedern will.Wenn man mit der maus über den obermenüpunkt geht soll ein untermenü erscheinen.Ich hab das jetzt so weit dass die Untermenüpunkte erscheinen (als Bilder) mit mouseover über die oberkategorien aber wie soll ich das jetzt verlinken wenn ich da imagemaps drüber leg (mit Adobe Imageready)bleiben die ja bestehen wenn das neue menüaufgerufen wird was soviel heißen soll dass die imagemaps dann falsch verlinken weil die ja mit dem wechselnden Bild auch wechseln sollen.
das ganze soll dann ungefähr so aussehen wie auf dieser seite das menü hier klicksch du
Brauch ich da n PHP script dafür bzw wie müsste das aussehen.Vielleicht habt ihr mir ja n Tut.
Danke für eure Hilfe

-Für jede hilfe gibts natürlich nen 10er

Anzeige

CR0SSfiRE · 6. August 2006

Wie wär's, wenn du auf der Seite einfach mal in den Quellcode schaust? Du brauchst JavaScript, den Eventhandler MouseOver/Out/blahwiederheißt und die display-Eigenschaft, mehr Infos kriegste von mir nicht.

Yuri · 6. August 2006

Als JavaScript reicht eine function, die das prüft, wenn man eben rüberscrollt, und dann die Bilder einfach mit <a></a> verlinken, wenn die angezeigt werden.

Und wie mein Vorredner schon sagte, mehr brauchst du dazu nicht.

Cydoc · 6. August 2006

Codeschnipsel von roniX-Desgn.ch

Code:



<script type="text/javascript">
<!--

function newImage(arg) {
 if (document.images) {
 rslt = new Image();
 rslt.src = arg;
 return rslt;
 }
}

function changeImages() {
 if (document.images && (preloadFlag == true)) {
 for (var i=0; i<changeImages.arguments.length; i+=2) {
 document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
 }
 }
}

var preloadFlag = false;
function preloadImages() {
 if (document.images) {
 navi_over_main__over = newImage("gfx/navi_over%5bmain%5d-over.jpg");
 navi_over_webdesign_over = newImage("gfx/navi_over%5bwebdesign-over.jpg");
 navi_over_misc__over = newImage("gfx/navi_over%5bmisc%5d-over.jpg");
 navi_main_news_over__over = newImage("gfx/navi_main_news%5bover%5d-over.jpg");
 navi_main_aboutme_over__over = newImage("gfx/navi_main_aboutme%5bover%5d-ove.jpg");
 navi_main_contact_over__over = newImage("gfx/navi_main_contact%5bover%5d-ove.jpg");
 navi_main_partners_over__over = newImage("gfx/navi_main_partners%5bover%5d-ov.jpg");
 navi_webdesign_references_over__over = newImage("gfx/navi_webdesign_reference-03.jpg");
 navi_webdesign_service_over__over = newImage("gfx/navi_webdesign_service%5bo-06.jpg");
 navi_misc_faq_over__over = newImage("gfx/navi_misc_faq%5bover%5d-over.jpg");
 navi_misc_affiliates_over__over = newImage("gfx/navi_misc_affiliates%5bover%5d-.jpg");
 navi_misc_downloads_over__over = newImage("gfx/navi_misc_downloads%5bover%5d-o.jpg");
 navi_misc_tutorials_over__over = newImage("gfx/navi_misc_tutorials%5bover%5d-o.jpg");
 navi_misc_impressum_over__over = newImage("gfx/navi_misc_impressum%5bover%5d-o.jpg");
 preloadFlag = true;
 }
}

function showMain()
{
 document.getElementById("navi_main").style.display = "";
 document.getElementById("navi_webdesign").style.display = "none";
 document.getElementById("navi_misc").style.display = "none";
}
function showWebdesign()
{
 document.getElementById("navi_main").style.display = "none";
 document.getElementById("navi_webdesign").style.display = "";
 document.getElementById("navi_misc").style.display = "none";
}
function showMisc()
{
 document.getElementById("navi_main").style.display = "none";
 document.getElementById("navi_webdesign").style.display = "none";
 document.getElementById("navi_misc").style.display = "";
}

// -->
</script>
</head>

<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onLoad="preloadImages();">
<div align="center">

 <table width="800" border="0" cellpadding="0" cellspacing="0" background="gfx/hg.jpg">
 <tr>
 <td colspan="2"><img src="gfx/header.jpg" width="800" height="157" /></td>
 </tr>
 <tr>
 <td colspan="2"><table width="800" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td><img src="gfx/navi_01.jpg" width="60" height="18" alt="" /></td>
 <td><a href="index.php?do=news"
 onmouseover="changeImages('navi_over_main_', 'gfx/navi_over%5bmain%5d-over.jpg'); showMain()"
 onmouseout="changeImages('navi_over_main_', 'gfx/navi_over%5bmain%5d.jpg'); return true;"> <img src="gfx/navi_over%5bmain%5d.jpg" alt="" name="navi_over_main_" width="113" height="18" border="0" id="navi_over_main_" /></a></td>

 <td><img src="gfx/navi_03.jpg" width="6" height="18" alt="" /></td>
 <td><a href="index.php?do=references"
 onmouseover="changeImages('navi_over_webdesign', 'gfx/navi_over%5bwebdesign-over.jpg'); showWebdesign()"
 onmouseout="changeImages('navi_over_webdesign', 'gfx/navi_over%5bwebdesign.jpg'); return true;"> <img src="gfx/navi_over%5bwebdesign.jpg" alt="" name="navi_over_webdesign" width="113" height="18" border="0" id="navi_over_webdesign" /></a></td>
 <td><img src="gfx/navi_05.jpg" width="6" height="18" alt="" /></td>
 <td><a href="index.php?do=affiliates"
 onmouseover="changeImages('navi_over_misc_', 'gfx/navi_over%5bmisc%5d-over.jpg'); showMisc()"
 onmouseout="changeImages('navi_over_misc_', 'gfx/navi_over%5bmisc%5d.jpg'); return true;"> <img src="gfx/navi_over%5bmisc%5d.jpg" alt="" name="navi_over_misc_" width="113" height="18" border="0" id="navi_over_misc_" /></a></td>
 <td><img src="gfx/navi_07.jpg" width="389" height="18" alt="" /></td>
 </tr>
 </table>
 <div style="" id="navi_main">

 <table width="800" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td><img src="gfx/navi_main_01.jpg" width="40" height="15" alt="" /></td>
 <td><a href="index.php?do=news"
 onmouseover="changeImages('navi_main_news_over_', 'gfx/navi_main_news%5bover%5d-over.jpg'); return true;"
 onmouseout="changeImages('navi_main_news_over_', 'gfx/navi_main_news%5bover%5d.jpg'); return true;"> <img src="gfx/navi_main_news%5bover%5d.jpg" alt="" name="navi_main_news_over_" width="71" height="15" border="0" id="navi_main_news_over_" /></a></td>
 <td><img src="gfx/navi_main_03.jpg" width="2" height="15" alt="" /></td>
 <td><a href="index.php?do=aboutme&amp;id=1"
 onmouseover="changeImages('navi_main_aboutme_over_', 'gfx/navi_main_aboutme%5bover%5d-ove.jpg'); return true;"
 onmouseout="changeImages('navi_main_aboutme_over_', 'gfx/navi_main_aboutme%5bover%5d.jpg'); return true;"> <img src="gfx/navi_main_aboutme%5bover%5d.jpg" alt="" name="navi_main_aboutme_over_" width="71" height="15" border="0" id="navi_main_aboutme_over_" /></a></td>
 <td><img src="gfx/navi_main_05.jpg" width="2" height="15" alt="" /></td>
 <td><a href="index.php?do=contact"
 onmouseover="changeImages('navi_main_contact_over_', 'gfx/navi_main_contact%5bover%5d-ove.jpg'); return true;"
 onmouseout="changeImages('navi_main_contact_over_', 'gfx/navi_main_contact%5bover%5d.jpg'); return true;"> <img src="gfx/navi_main_contact%5bover%5d.jpg" alt="" name="navi_main_contact_over_" width="71" height="15" border="0" id="navi_main_contact_over_" /></a></td>

 <td><img src="gfx/navi_main_07.jpg" width="2" height="15" alt="" /></td>
 <td><a href="index.php?do=partners"
 onmouseover="changeImages('navi_main_partners_over_', 'gfx/navi_main_partners%5bover%5d-ov.jpg'); return true;"
 onmouseout="changeImages('navi_main_partners_over_', 'gfx/navi_main_partners%5bover%5d.jpg'); return true;"> <img src="gfx/navi_main_partners%5bover%5d.jpg" alt="" name="navi_main_partners_over_" width="71" height="15" border="0" id="navi_main_partners_over_" /></a></td>
 <td><img src="gfx/navi_main_09.jpg" width="470" height="15" alt="" /></td>
 </tr>
 </table>
 </div>
 <div style="display: none;" id="navi_webdesign">
 <table width="800" border="0" cellpadding="0" cellspacing="0">

 <tr>
 <td><img src="gfx/navi_webdesign_01.jpg" width="40" height="15" alt="" /></td>
 <td><a href="index.php?do=references"
 onmouseover="changeImages('navi_webdesign_references_over_', 'gfx/navi_webdesign_reference-03.jpg'); return true;"
 onmouseout="changeImages('navi_webdesign_references_over_', 'gfx/navi_webdesign_references%5bo.jpg'); return true;"> <img src="gfx/navi_webdesign_references%5bo.jpg" alt="" name="navi_webdesign_references_over_" width="71" height="15" border="0" id="navi_webdesign_references_over_" /></a></td>
 <td><img src="gfx/navi_webdesign_03.jpg" width="2" height="15" alt="" /></td>
 <td><a href="index.php?do=service"
 onmouseover="changeImages('navi_webdesign_service_over_', 'gfx/navi_webdesign_service%5bo-06.jpg'); return true;"
 onmouseout="changeImages('navi_webdesign_service_over_', 'gfx/navi_webdesign_service%5bover.jpg'); return true;"> <img src="gfx/navi_webdesign_service%5bover.jpg" alt="" name="navi_webdesign_service_over_" width="71" height="15" border="0" id="navi_webdesign_service_over_" /></a></td>
 <td><img src="gfx/navi_webdesign_05.jpg" width="616" height="15" alt="" /></td>
 </tr>
 </table>

 </div>
 <div style="display: none;" id="navi_misc">
 <table width="800" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td><img src="gfx/navi_misc_01.jpg" width="40" height="15" alt="" /></td>
 <td><a href="index.php?do=faq"
 onmouseover="changeImages('navi_misc_faq_over_', 'gfx/navi_misc_faq%5bover%5d-over.jpg'); return true;"
 onmouseout="changeImages('navi_misc_faq_over_', 'gfx/navi_misc_faq%5bover%5d.jpg'); return true;"> <img src="gfx/navi_misc_faq%5bover%5d.jpg" alt="" name="navi_misc_faq_over_" width="71" height="15" border="0" id="navi_misc_faq_over_" /></a></td>
 <td><img src="gfx/navi_misc_03.jpg" width="2" height="15" alt="" /></td>
 <td><a href="index.php?do=affiliates"
 onmouseover="changeImages('navi_misc_affiliates_over_', 'gfx/navi_misc_affiliates%5bover%5d-.jpg'); return true;"
 onmouseout="changeImages('navi_misc_affiliates_over_', 'gfx/navi_misc_affiliates%5bover%5d.jpg'); return true;"> <img src="gfx/navi_misc_affiliates%5bover%5d.jpg" alt="" name="navi_misc_affiliates_over_" width="71" height="15" border="0" id="navi_misc_affiliates_over_" /></a></td>

 <td><img src="gfx/navi_misc_07.jpg" width="2" height="15" alt="" /></td>
 <td><a href="index.php?do=downloads"
 onmouseover="changeImages('navi_misc_downloads_over_', 'gfx/navi_misc_downloads%5bover%5d-o.jpg'); return true;"
 onmouseout="changeImages('navi_misc_downloads_over_', 'gfx/navi_misc_downloads%5bover%5d.jpg'); return true;"> <img src="gfx/navi_misc_downloads%5bover%5d.jpg" alt="" name="navi_misc_downloads_over_" width="71" height="15" border="0" id="navi_misc_downloads_over_" /></a></td>
 <td><img src="gfx/navi_misc_09.jpg" width="2" height="15" alt="" /></td>
 <td><a href="index.php?do=tutorials"
 onmouseover="changeImages('navi_misc_tutorials_over_', 'gfx/navi_misc_tutorials%5bover%5d-o.jpg'); return true;"
 onmouseout="changeImages('navi_misc_tutorials_over_', 'gfx/navi_misc_tutorials%5bover%5d.jpg'); return true;"> <img src="gfx/navi_misc_tutorials%5bover%5d.jpg" alt="" name="navi_misc_tutorials_over_" width="71" height="15" border="0" id="navi_misc_tutorials_over_" /></a></td>
 <td><img src="gfx/navi_misc_11.jpg" width="2" height="15" alt="" /></td>
 <td><a href="index.php?do=impressum"
 onmouseover="changeImages('navi_misc_impressum_over_', 'gfx/navi_misc_impressum%5bover%5d-o.jpg'); return true;"
 onmouseout="changeImages('navi_misc_impressum_over_', 'gfx/navi_misc_impressum%5bover%5d.jpg'); return true;"> <img src="gfx/navi_misc_impressum%5bover%5d.jpg" alt="" name="navi_misc_impressum_over_" width="71" height="15" border="0" id="navi_misc_impressum_over_" /></a></td>
 <td width="73"><img src="gfx/navi_misc_14.jpg" width="73" height="15" /></td>

 <td><img src="gfx/navi_misc_13.jpg" width="324" height="15" alt="" /></td>
 </tr>
 </table>
 </div>
 </td>

mehr brauchst du nicht^^ wenn du es bei nen klick haben willst und nciht bei mouseover, naja dann machst du ebend bei onklick="" ^^

aber ansonsten haste dort alles

mfg

cydoc

ZillAru$ · 6. August 2006

also ich hab das jetzt so weit

Code:

<area shape="poly" alt="" coords="42,1, 69,3, 80,9, 96,13, 106,14, 106,18, 106,25, 106,31, 41,33" href="#"
 onmouseover="changeImages('index1_02', 'Bilder/index1_02-media_over.jpg', 'index1_03', 'Bilder/index1_03-home_over.jpg', 'index1_04', 'Bilder/index1_04-home_over.jpg', 'index1_05', 'Bilder/index1_05-home_over.jpg', 'index1_06', 'Bilder/index1_06-home_over.jpg', 'index1_07', 'Bilder/index1_07-media_over.jpg', 'index1_08',
'Bilder/index1_08-home_over.jpg'); return true;"
 onmouseout="changeImages('index1_02', 'Bilder/index1_02-media_over.jpg', 'index1_03', 'Bilder/index1_03-home_over.jpg', 'index1_04', 'Bilder/index1_04-home_over.jpg', 'index1_05', 'Bilder/index1_05-home_over.jpg', 'index1_06', 'Bilder/index1_06-home_over.jpg', 'index1_07', 'Bilder/index1_07-media_over.jpg', 'index1_08',
'Bilder/index1_08-home_over.jpg'); return true;"
 onmousedown="changeImages('index1_02', 'Bilder/index1_02-media_over.jpg', 'index1_03', 'Bilder/index1_03-home_over.jpg', 'index1_04', 'Bilder/index1_04-home_over.jpg', 'index1_05', 'Bilder/index1_05-home_over.jpg', 'index1_06', 'Bilder/index1_06-home_over.jpg', 'index1_07', 'Bilder/index1_07-media_over.jpg', 'index1_08',
'Bilder/index1_08-home_over.jpg'); return true;"
 onmouseup="changeImages('index1_02', 'Bilder/index1_02-media_over.jpg', 'index1_03', 'Bilder/index1_03-home_over.jpg', 'index1_04', 'Bilder/index1_04-home_over.jpg', 'index1_05', 'Bilder/index1_05-home_over.jpg', 'index1_06', 'Bilder/index1_06-home_over.jpg', 'index1_07', 'Bilder/index1_07-media_over.jpg', 'index1_08',
'Bilder/index1_08-home_over.jpg'); return true;">

wie verlinke ich nun das neu geladene hover bild ?

danke für eure hilfe 10er habt ihr

Nützliche Suchen

Untermenü erstellen das mit mouseover wechselt

Videos zum Themenbereich