suche script für hintergrundbild mouseover onclick..

[bigi]

guten tag

ich suche schon echt verzweifelt ein script um hintergrundbilder meiner navigation zu wechseln. wichtig ist das der aktive link bleibt bis zum nächsten klick.

da ich nichts finde habe ich ein normals bildwechsel script genommen und versuche es jetzt umzubauen!

problem ist: kann dem hintergrundbild keinen namen vergeben und versuche deshalb mit id auf die tabellenzelle zu zugreifen..was irgendwie auch nicht geht!

hat jemand tips oder links??

hier mein bastel script:

<script language="JavaScript" type="text/javascript">
<!--
letztes="";
function changeImage(tdId,imgFile)
{ if(letztes!=backgroundImage)
{document.style.backgroundImage[tdId].src=imgFile;}
}

function druecken(backgroundImage,imgFile)
{ document.style.backgroundImage[tdId].src=imgFile;
if(letztes!=""&&letztes!=tdId)
{document.style.backgroundImage[letztes].src='url(navi_images/orange.jpg)';}
letztes=tdId;}
//-->

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td onMouseover="changeImage.this.style.backgroundImage=('bgimg','url(navi_images/gray.jpg)');"
  onMouseout="changeImage.this.style.backgroundImage=('bgimg','url(navi_images/orange.jpg)');"
  onclick="druecken.this.style.backgroundImage=('bgimg','url(navi_images/gray.jpg)');" width="98" height="39" id="bgimg" style="background-image: url(navi_images/orange.jpg)"><div class="top"><a href="#">Home</div></a></td>....u.s.w

danke für die hilfe!!!

[Jeena Paradies]

Hallo bigi,

Das was du vor hast lässt sich doch wunderbar mit CSS machen:
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

Dann solltest du noch was beachten:
http://www.useit.com/alertbox/20031110.html
Und dort ganz unten alles was unter Punkt »10. Don't include an active link to the homepage on the homepage« steht.

Du kannst da eine Liste machen:

<ul id="menue">
 <li><a href="">erster Menüpunkt</a></li>
 <li><a href="">zweiter Menüpunkt</a></li>
 <li>dritter Menüpunkt</li>
 <li><a href="">vierter Menüpunkt</a></li>
 <li><a href="">fünfter Menüpunkt</a></li>
</ul>

im CSS formatierst du alle <li> so wie den Aktuellen Link danach überschreibst du für alle Links die Formatierung und formatierst sie so wie es Pixy gezeigt hat. Fertig! Nun können sogar Leute ohne JS deinen Hovereffekt sehen.

Grüße
Jeena Paradies

[bigi]

hey jeena

danke für deine schnelle antwort!
ich probiere das jetzt aus und melde mich wieder.

:) wow bin ich froh das ich mal ne vernünftige antwort gekriegt habe!
weil ist nicht das erste forum das ich nerve....

gruss bigi

[Jeena Paradies]

Hallo bigi,

:) wow bin ich froh das ich mal ne vernünftige antwort gekriegt habe!
weil ist nicht das erste forum das ich nerve....

Na wir sind doch hier professionell ;)

Was das gute dabei ist ist dass der Quelltext auch viel kleiner wird:

---

<script language="JavaScript" type="text/javascript">
<!--
letztes="";
function changeImage(tdId,imgFile)
{ if(letztes!=backgroundImage)
{document.style.backgroundImage[tdId].src=imgFile;}
}

function druecken(backgroundImage,imgFile)
{ document.style.backgroundImage[tdId].src=imgFile;
if(letztes!=""&&letztes!=tdId)
{document.style.backgroundImage[letztes].src='url(navi_images/orange.jpg)';}
letztes=tdId;}
//-->
</script>

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td onMouseover="changeImage.this.style.backgroundImage=('bgimg','url(navi_images/gray.jpg)');"
  onMouseout="changeImage.this.style.backgroundImage=('bgimg','url(navi_images/orange.jpg)');"
  onclick="druecken.this.style.backgroundImage=('bgimg','url(navi_images/gray.jpg)');" width="98" height="39" id="bgimg" style="background-image: url(navi_images/orange.jpg)"><div class="top"><a href="#">erster Menüpunkt</div></a></td>
<td onMouseover="changeImage.this.style.backgroundImage=('bgimg','url(navi_images/gray.jpg)');"
  onMouseout="changeImage.this.style.backgroundImage=('bgimg','url(navi_images/orange.jpg)');"
  onclick="druecken.this.style.backgroundImage=('bgimg','url(navi_images/gray.jpg)');" width="98" height="39" id="bgimg" style="background-image: url(navi_images/orange.jpg)"><div class="top"><a href="#">zweiter Menüpunkt</div></a></td>
<td onMouseover="changeImage.this.style.backgroundImage=('bgimg','url(navi_images/gray.jpg)');"
  onMouseout="changeImage.this.style.backgroundImage=('bgimg','url(navi_images/orange.jpg)');"
  onclick="druecken.this.style.backgroundImage=('bgimg','url(navi_images/gray.jpg)');" width="98" height="39" id="bgimg" style="background-image: url(navi_images/orange.jpg)"><div class="top"><a href="#">dritter Menüpunkt</div></a></td>
<td onMouseover="changeImage.this.style.backgroundImage=('bgimg','url(navi_images/gray.jpg)');"
  onMouseout="changeImage.this.style.backgroundImage=('bgimg','url(navi_images/orange.jpg)');"
  onclick="druecken.this.style.backgroundImage=('bgimg','url(navi_images/gray.jpg)');" width="98" height="39" id="bgimg" style="background-image: url(navi_images/orange.jpg)"><div class="top"><a href="#">vierter Menüpunkt</div></a></td>
<td onMouseover="changeImage.this.style.backgroundImage=('bgimg','url(navi_images/gray.jpg)');"
  onMouseout="changeImage.this.style.backgroundImage=('bgimg','url(navi_images/orange.jpg)');"
  onclick="druecken.this.style.backgroundImage=('bgimg','url(navi_images/gray.jpg)');" width="98" height="39" id="bgimg" style="background-image: url(navi_images/orange.jpg)"><div class="top"><a href="#">fünfter Menüpunkt</div></a></td>
 </tr>
</table>

---

Im vergleich dazu der neue Quellcode:

---

<ul id="menue">
 <li><a href="">erster Menüpunkt</a></li>
 <li><a href="">zweiter Menüpunkt</a></li>
 <li>dritter Menüpunkt</li>
 <li><a href="">vierter Menüpunkt</a></li>
 <li><a href="">fünfter Menüpunkt</a></li>
</ul>

---

Und alle Formatierungen sind dann in der Externen CSS Datei und müssen nur ein mal heruntergeladen werden.

Grüße
Jeena Paradies

[Ingo Turski]

Hi,

ich bin mir nicht sicher, ob Du Bigis Problem verstanden hast. Weil

wichtig ist das der aktive link bleibt bis zum nächsten klick.

klingt für mich nach einer Frameset-Navigation. Und hier hilft ja außer ein angepaßtes Navigationsframe zu laden (oder gleich ganz auf Frames zu verzichten) nur Javascript.

freundliche Grüße
Ingo

[Jeena Paradies]

Hallo Ingo,

ich bin mir nicht sicher, ob Du Bigis Problem verstanden hast.

Hm das stimmt daran habe ich natürlich gar nicht gedacht. Na dann empfehle ich Frames wegzulassen.

Grüße
Jeena Paradies

[bigi]

hmm hallo ingo & jeena

ich arbeite nicht mit frames..asp includes..
was den jetzt nun css odr js..?

habe es schon mal mit css versucht und für den aktiven link der so bleiben soll auch keine lösung gefunden...

bigi

[Jeena Paradies]

Hallo bigi,

ich arbeite nicht mit frames..asp includes..
was den jetzt nun css odr js..?

CSS

habe es schon mal mit css versucht und für den aktiven link der so bleiben soll auch keine lösung gefunden...

Die Lösung ist dass die Navigation auf jeder Seite anders aussieht:

------ erste Seite -----------------------
<ul id="menue">
 <li>erster Menüpunkt</li>
 <li><a href="">zweiter Menüpunkt</a></li>
 <li><a href="">dritter Menüpunkt</a></li>
 <li><a href="">vierter Menüpunkt</a></li>
 <li><a href="">fünfter Menüpunkt</a></li>
</ul>

------ erste Seite -----------------------
<ul id="menue">
 <li><a href="">erster Menüpunkt</a></li>
 <li>zweiter Menüpunkt</li>
 <li><a href="">dritter Menüpunkt</a></li>
 <li><a href="">vierter Menüpunkt</a></li>
 <li><a href="">fünfter Menüpunkt</a></li>
</ul>

------ erste Seite -----------------------
<ul id="menue">
 <li><a href="">erster Menüpunkt</a></li>
 <li><a href="">zweiter Menüpunkt</a></li>
 <li>dritter Menüpunkt</a></li>
 <li><a href="">vierter Menüpunkt</a></li>
 <li><a href="">fünfter Menüpunkt</a></li>
</ul>

und so weiter. Das kanst du entweder mit vielen if seite dann blabla, oder du bindest die Navigation fest in die html seite ein.

Grüße
Jeena Paradies

[bigi]

und so weiter. Das kanst du entweder mit vielen if seite dann blabla, oder du bindest die Navigation fest in die html seite ein.

hmm eigentlich möchte ich meine navigation nicht in jeder seite haben!

ich glaube ich vergesse das ganze hintergrundbild zeugs und mache es mit normalen bildern und css...

danke für eure hilfe und bis auf ein andermal...

freundliche grüsse bigi

[bigi]

ich glaube ich vergesse das ganze hintergrundbild zeugs und mache es mit normalen bildern und css...

nein ich meine natürlich javascript!

bye bye

[Jeena Paradies]

Hallo bigi,

hmm eigentlich möchte ich meine navigation nicht in jeder seite haben!

Was würde denn dagegen sprechen?

ich glaube ich vergesse das ganze hintergrundbild zeugs und mache es mit normalen bildern und css...

Das ist natürlich der Weg des geringsten Wiederstandes. Dennoch hast du da das gleiche Problem dass der Link der auf die Seite Zeigt auf der man gerade ist nicht anders dargestellt wird. Und so viel extra markup ist es ja wirklich nicht. Außerdem hast du dann noch das Problem mit den auf sich selbst zeigenden Links beseitigt.

Grüße
Jeena Paradies

[bigi]

hmm eigentlich möchte ich meine navigation nicht in jeder seite haben!
Was würde denn dagegen sprechen?

das wenn ich meine navigation ändern möchte, ich es in jeder der c.a. 30 seiten einzel machen muss!

ich glaube ich vergesse das ganze hintergrundbild zeugs und mache es mit normalen bildern und css...

meine natürlich javascript!

grüsse bigi

[Jeena Paradies]

Hallo bigi,

hmm eigentlich möchte ich meine navigation nicht in jeder seite haben!
Was würde denn dagegen sprechen?
das wenn ich meine navigation ändern möchte, ich es in jeder der c.a. 30 seiten einzel machen muss!

Na wie oft willst du sie denn ändern? Wenn du sie wirklich oft änderst dann kannst du dir ja ein Script schreiben welches abfragt auf welcher Seite der User sich befindet und dem Entsprechend das Script zusammenbaut per Serverseitiger Scriptsprache. Das Bindest du dann einmal ein und schon hat sich der Lack.

Ich denke da an:

wenn aktuelle_seite = 1.html
 dann schreibe <li>erster Menüpunkt</li>
sonst schreibe <li><a href="1.html">erster Menüpunkt</a></li>
wenn aktuelle_seite = 2.html
 dann schreibe <li>zweiter Menüpunkt</li>
sonst schreibe <li><a href="1.html">zweiter Menüpunkt</a></li>
wenn aktuelle_seite = 3.html
 dann schreibe <li>dritter Menüpunkt</li>
sonst schreibe <li><a href=".html">dritter Menüpunkt</a></li>
usw.

bestimmt lässt sich das noch eleganter lösen mit einer Schleife oder so was. Dann hast du damit keine Probleme.

Grüße
Jeena Paradies

[bigi]

hey jeena

nun ich mache es jetzt mit folgendem script:

<script language="JavaScript" type="text/javascript">
<!--
letztes="";
function changeImage(imgName,imgFile)
{ if(letztes!=imgName)
{document.images[imgName].src=imgFile;}
}

function druecken(imgName,imgFile)
{ document.images[imgName].src=imgFile;
if(letztes!=""&&letztes!=imgName)
{document.images[letztes].src="upbild";}
letztes=imgName;}
//-->
</script>

jetzt habe ich aber wieder ein neues problem... :o( ...snief...

ich brauche für "upbild" eine neue variable die sich das bild merkt, welches zum rücksetzen des zuletzt geklickten bildes benötigt wird...

aber wie ich das mache...hmm?!?

mit serverseitiger programmierung bin ich zuwenig erfahren um das so zulösen...

gruss bigi

[Jeena Paradies]

Hallo bigi,

mit serverseitiger programmierung bin ich zuwenig erfahren um das so zulösen...

Wenn du schon includes nutzt dann wirst du ja wohl eine einfache If abfrage hinkriegen oder? Wir können dir doch dabei helfen. Denke auch daran dass nicht alle JavaScript an haben.

Grüße
Jeena Paradies