Rollover: 1 Bild wechseln, 1 Imagemap einblenden

[Frank Heuser]

Hallo zusammen!

ich krieg's einfach nicht hin:

ein Javascript soll beim onmouseover ein Bild wechseln und gleichzeitig darunter ein Bild mit Imagemap einblenden (Layer). Verlasse ich das Bild oder die Imagemap, soll der alte Zustand wiederhergestellt werden.

Weiss jemand einen Lösungsansatz oder kennt sogar ein fertiges Skript?

viele Grüße
Frank

[wahsaga]

hi,

ich krieg's einfach nicht hin:

dann teile uns mit, was du versucht hast, und woran du scheiterst.

gruss,
wahsaga

[hein]

ein Javascript soll beim onmouseover ein Bild wechseln und gleichzeitig darunter ein Bild mit Imagemap einblenden (Layer).

.. was heisst "darunter"?

1. es liegt als schicht unter dem bild - wozu brauchst du dann ein imagemap, wenn ein anderes bild drüber liegt?

2. es ist auf der seite drunter angeordnet - dann packst das imagemap-konstrukt in einen <div id="irgendwas">-bereich, der anfangs den style="display:none;" bekommt. dann erweiterst die funktion, die dein rollover realsiert, um eine style-anweisung, die den div-container mittels "inline" sichtbar macht.

gut wäre natürlich, du würdest posten, wie dein code bisher aussieht ..

gruß hein

[Frank Heuser]

Hallo Hein, Hallo wahsaga,

vielen Dank für Eure erste Reaktion. Hier mein bisheriger Code:

JAVASCRIPT ZUM EIN-/AUSBLENDEN DER IMAGEMAP (UNTERNAVIGATION)

<script language="JavaScript">
<!--//

//Default browsercheck, added to all scripts!
function checkBrowser(){
 this.ver=navigator.appVersion
 this.dom=document.getElementById?1:0
 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
 this.ie4=(document.all && !this.dom)?1:0;
 this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
 this.ns4=(document.layers && !this.dom)?1:0;
 this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
 return this
}
bw=new checkBrowser()

//With nested layers for netscape, this function hides the layer if it's visible and visa versa
function showHide(div,nest){
 obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
 if(obj.visibility=='visible' || obj.visibility=='show') obj.visibility='hidden'
 else obj.visibility='visible'
}
//Shows the div
function show(div,nest){
 obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
 obj.visibility='visible'
}
//Hides the div
function hide(div,nest){
 obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
    obj.visibility='hidden'
}
//-->
</script>

<div id="produkte" style="position:absolute;left:362px;top:63px;visibility:hidden;" ONMOUSEOVER="nav_img.src='/img/nav_produkte.gif';show('produkte');" ONMOUSEOUT="nav_img.src='/img/nav_off.gif';hide('produkte');"><img src="/img/nav_sub_produkte.gif" width="267" height="246" border="0" alt="" USEMAP="#sub_navigation"></div>

---
MAP 1: HAUPTNAVIGATION
---
<MAP NAME="navigation">
<AREA SHAPE="poly" ALT="" COORDS="215,1, 229,17, 312,17, 298,1" HREF="/kontakt/" ONMOUSEOVER="nav_img.src='/img/nav_kontakt.gif';" ONMOUSEOUT="nav_img.src='/img/nav_off.gif';">
<AREA SHAPE="poly" ALT="" COORDS="121,1, 135,17, 228,17, 214,1" HREF="/produkte/" ONMOUSEOVER="nav_img.src='/img/nav_produkte.gif';show('produkte');" ONMOUSEOUT="nav_img.src='/img/nav_off.gif';hide('produkte');">
<AREA SHAPE="poly" ALT="" COORDS="1,1, 15,17, 134,17, 120,1" HREF="/unternehmen/" ONMOUSEOVER="nav_img.src='/img/nav_unternehmen.gif'" ONMOUSEOUT="nav_img.src='/img/nav_off.gif'">
</MAP>

---
MAP 2: UNTERNAVIGATION
---

<MAP NAME="sub_navigation"  ONMOUSEOVER="nav_img.src='/img/nav_produkte.gif';show('produkte');" ONMOUSEOUT="nav_img.src='/img/nav_off.gif';hide('produkte');">
...
</MAP>

Soweit klappt das jetzt auch mit IE und Mozilla: wenn ich in der Hauptnavigation auf den Punkt "produkte" bin, wird darunter die Unternavigation (Layer) eingeblendet. Leider fängt beim IE beim überfahren der Unternavigation das Bild an zu flackern.

Ich hoffe, ihr könnt das Problem so nachvollziehen.

viele Grüße
Frank

[wahsaga]

hi,

Ich hoffe, ihr könnt das Problem so nachvollziehen.

das würdest du uns mit einem online-beispiel wesentlich leichter machen.

ich werde jetzt nicht hingehen, mir dein javascript in eine html-seite reinbasteln, bilder dazu legen, nur um das ausprobieren zu können ...

gruss,
wahsaga

[Frank Heuser]

hallo wahsaga,

hab's mal hochgeladen:

http://hahn.screenteam.org/

[wahsaga]

hi,

hab's mal hochgeladen:
http://hahn.screenteam.org/

das ganze nächstes mal noch als link (siehe </faq/>), dann ist es noch schöner.
http://hahn.screenteam.org/

ja, schick - und was genau funktioniert daran jetzt nicht so, wie es soll?

gruss,
wahsaga

[Frank Heuser]

hi wahsaga,

ja, schick - und was genau funktioniert daran jetzt nicht so, wie es soll?

wenn du mit dem IE über die unternavigation fährst, fängt diese an zu flackern...!?

viele grüße
frank