onmouseover() Multi-Anweisung

[Nobody1993]

Hallo Ihr,

Ich bin gerade dabei, eine Navigation zu bauen.

2 Funktionen soll diese haben:

onmouseover: Hover (Bildwechsel)
Drop-Down öffnet sich.

Ich kriege jedes einzelnd hin:

<li><a href="./" onmouseover="Bildwechsel(0, Highlight1)" onmouseout="Bildwechsel(0, Normal1)"><img src="./images/Buttons/Normal/News.gif" alt="News"></a></li>

bzw.

<a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()"><img src="./images/kontakt.gif" alt="Kontakt"></a>

Wie kombinier ich das jetzt so, dass sowohl der Button sich wechselt, als auch der Drop-Down fährt?

Hatte das mit "onmouseover='Bildwechsel(0, Highlight1)';mopen('m2')" gemacht, aber das funktionierte nicht ;(


Danke im vorraus,
Nobody1993

 

[threadi]

Normalerweise müsste dein Versuch funktionieren. Vorausgesetzt die von dir geschriebenen Funktionen kommen sich nicht in die Quere (was ich mal stark vermute).

Alternative:
HTML

.. onmouseover="funktionssammlung();" ..

JS

function funktionssammlung() {
 Bildwechsel(0, Highlight1)';
 mopen('m2');
}

 

[Nobody1993]

geht ebenfalls net :(

Beide Funktionen funktionieren alleine, aber nicht zusammen....

 

[threadi]

Dann zeig die Funktionen, dann könnte man ggfs. erkennen wieso es nicht klappt.

 

[Nobody1993]

<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
// ->document.onclick = mclose;
document.onclick = mclose;
// -->
</script>

bzw:

Normal1 = new Image();
Normal1.src = "./images/Buttons/Normal/News.gif"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "./images/Buttons/Hover/News.gif"; /* erste Highlight-Grafik */

Normal2 = new Image();
Normal2.src = "./images/Buttons/Normal/Forum.gif"; /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "./images/Buttons/Hover/Forum.gif"; /* zweite Highlight-Grafik */

Normal3 = new Image();
Normal3.src = "./images/Buttons/Normal/Gaestebuch.gif"; /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "./images/Buttons/Hover/Gaestebuch.gif"; /* dritte Highlight-Grafik */

Normal4 = new Image();
Normal4.src = "./images/Buttons/Normal/Turnier.gif"; /* vierte Standard-Grafik */
Highlight4 = new Image();
Highlight4.src = "./images/Buttons/Hover/Turnier.gif"; /* vierte Highlight-Grafik */

Norma5 = new Image();
Normal5.src = "./images/Buttons/Normal/Kontakt.gif"; /* fünfte Standard-Grafik */
Highlight5 = new Image();
Highlight5.src = "./images/Buttons/Hover/Kontakt.gif"; /* fünfte Highlight-Grafik */


function Bildwechsel (Bildnr, Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt.src;
}

Das sind beide Funktionen.

 

[threadi]

Ich würde vorschlagen du verzichtest auf diese Bildwechsel-Funktion. Denn das kannst Du auch mit CSS abbilden.

a {
 background-image: url(./images/Buttons/Normal/Kontakt.gif);
}

a:hover {
 background-image: url(./images/Buttons/Hover/Kontakt.gif);
}

 

[Nobody1993]

Ich hab aber 5 verschiedene Navigationspfade und auch für jeden davon ein eigenes Normal + HoverBild :S Wie sieht denn das dann aus?

 

[alogheo]

<a id="link1" href="#">link1</a>
<a id="link2" href="#">link2</a>
...

a#link1
{  background: url(normalbild1);  }
a#link1:hover
{  background: url(hoverbild1);  }

a#link2
{  background: url(normalbild2);  }
a#link2:hover
{  background: url(hoverbild2);  }
...

 

[Nobody1993]

Nein :/

Ich will ja nicht einen Text hinterlegen mit einem Bild, sondern nur einen Button haben, nix mit Text. Dein Lösungsvorschlag geht ja jetzt nur, solang dort auch bei dem <a></a> ein Text drin steht und dann auch nur auf der Größe und nicht im vollen Bildmaß :S

 

[threadi]

HTML

<a href="linkziel" id="link1">&nbsp;</a>

CSS

a#linkziel {
 display: block;
 width: XYpx;
 height: XYpx;
}

oder

a#linkziel {
 display: block;
  padding: Xpx Ypx;
}

 

[Nobody1993]

Sehr gut :) Funktioniert. Dank euch.