Javascript Problem

M

marcus24

Mitglied
Hy,
Also ich hab in meinem Script, frames mittels PHP simuliert und Menüs mit Untermenüs erstellt. Soweit ist auch alles klar. Nur steh ich jetzt vor dem Problem, das ich den Bildertausch mit Javascript nicht hinbekomme :/
Ich Poste auch gleich mal den Code, ....

Code: 
<script language="JavaScript"> 
<!-- 
function doHover(b,i) 
{ 
f = document[b].src; 
f = f.substr(0,f.length-5); 
f+=i+'.png'; 
document[b].src = f; 
} 
//--> 
</script> 
 
<?php 
 
	 // Hier steht der ganze PHP Codeteil 
 
?> 
 
<a href="index.php" onMouseOver="doHover('home','b')" onMouseOut="doHover('home','a')" 
onMouseDown="doHover('home','c')"><img src="gif/home_a.png" name="home" 
alt="Home" border="0"></a><br> 
 
<a href="index.php?section=wir_ueber_uns" onMouseOver="doHover('wir','b')" 
onMouseOut="doHover('wir','a')" onMouseDown="doHover('wir','c')" onmouseup="doHover
('wir','a')"><img src="gif/wir_a.png" name="wir" alt="Wir &uuml;ber uns" 
border="0"></a><br> 
 
<a href="index.php?section=service" onMouseOver="doHover('service','b')" 
onMouseOut="doHover('service','a')" onMouseDown="doHover('service','c')" 
onmouseup="doHover('service','a')"><img src="gif/service_a.png" name="service" 
alt="Service" border="0"></a><br> 
 
<a href="index.php?section=news" onMouseOver="doHover('news','b')" 
onMouseOut="doHover('news','a')" onMouseDown="doHover('news','c')" 
onmouseup="doHover('news','a')"><img src="gif/news_a.png" name="news" alt="News" 
border="0"></a><br> 
 
<a href="index.php?section=kontakt" onMouseOver="doHover('kontakt','b')" 
onMouseOut="doHover('kontakt','a')" onMouseDown="doHover('kontakt','c')" 
onmouseup="doHover('kontakt','a')"><img src="gif/kontakt_a.png" name="kontakt" 
alt="Kontakt" border="0"></a><br> 
 
<a href="index.php?section=sitemap" onMouseOver="doHover('sitemap','b')" 
onMouseOut="doHover('sitemap','a')" onMouseDown="doHover('sitemap','c')" 
onmouseup="doHover('sitemap','a')"><img src="gif/sitemap_a.png" name="sitemap" 
alt="Sitemap" border="0"></a><br> 
 
<a href="index.php?section=agb" onMouseOver="doHover('agb','b')" 
onMouseOut="doHover('agb','a')" onMouseDown="doHover('agb','c')" onmouseup="doHover
('agb','a')"><img src="gif/agb_a.png" name="agb" alt="AGB" border="0"></a><br>

Nun zum Ablauf: Bei Aufruf der Seite werden alle links mit BildXY_a.png dargestellt. Bewegt ein User den Courser über nen Link, dann wird der link mit BildXY_b.png dargestellt. Und wenn ein User einen Link anklickt, wird der Link mit BildXY_c.png symbolisiert. Das einzige Problem was ich hierbei habe ist, das nach klicken eines linkes zwar das BildXY_c.png aufgerufen wird, aber nach loslassen der Maustaste, zeigt er wieder BildXY_a.png an. Wie oder was muss ich verändern oder hinzufügen, das beim klicken eines linkes das BildXY_c.png bleibt und erst wieder wechselt wenn ich einen anderen Link aufrufe?:confused:
 
Zuletzt bearbeitet:
Speichere das angeklickte Bild in einer Variablen.

Vorgehensweise:
Eingangs der Funktion prüfe, ob document[b] mit dem Inhalt dieser Variablen übereinstimmt. Wenn ja, verlasse die Funktion per return;

Wenn i "c" ist, weise dem Inhalt des aktiven Bildes das "a"-Bild zu, danach speichere document[b] in der besagten Variablen, und weise diesem Bild das "c"-Bild zu.
 
Hab ich mir ja fast gedacht :)
Aber leider funktioniert das nicht so wie ich will. Kann aber auch daran liegen das ich mich wenig mit Javascript auskenne.
Ich habe meinen oberen Code durch diesen ersetzt:
Code: 
<script type="text/javascript">
<!-- 
function doHover(b,i){ 
 var f = document[b].src; 
 if(f.substr(f.length-5)=='c.png'&&i=='a'){return true;} 
 f = f.substr(0,f.length-5); 
 f+=i+'.png'; 
 document[b].src = f; 
} 
//--> 
</script>
Aber es funktioniert nicht. Kann mit bitte jemand sagen was ich falsch mache und eventuell den richtigen Lösungsweg posten? Bin für jede Hilfe Dankbar :)
 
Probiers mal hiermit:
Code: 
<script type="text/javascript"> 
<!-- 
objImg=false;
function doHover(i,s) 
{ 
if(i==objImg)return;
if(s=='c')
    {
        if(objImg)
            {
                f = objImg.src; 
                f = f.substr(0,f.length-5); 
                f+='a.png';
                objImg.src=f;
            }
         objImg=i;
    }
    f = i.src; 
    f = f.substr(0,f.length-5); 
    f+=s+'.png';
    i.src=f;
} 


function init()
{
for(i=0;i<document.images.length;++i)
    {
        if(document.images[i].name=='btn')
            {
                document.images[i].onclick=new Function('f1','doHover(this,"c")');
                document.images[i].onmouseover=new Function('f2','doHover(this,"b")');
                document.images[i].onmouseout=new Function('f1','doHover(this,"a")');
            }
    }
}
window.onload=init;

//--> 
</script> 
 
 
<a href="#"><img src="gifs/home_a.png" name="btn" alt="Home" border="0"></a><br>
<a href="#"><img src="gifs/wir_a.png" name="btn" alt="wir" border="0"></a>
......usw
....das macht das von mir Beschriebene.
Obendrein erspart es dir noch das umständliche Notieren der ganzen Funktionsaufrufe, du musst den ganzen bildern nur den Namen "btn" geben...fertig:)
 
:confused: Ich hab alles so, wie du es beschrieben hast gemacht, aber entweder ist da ein hund in dem Code oder ich bin einfach nur zu dumm dafür :rolleyes:

Jetzt macht er aber trotzdem das gleiche wie ich schon oben beschrieben hab. Nach dem Klick auf nen Links bleibt er nicht auf _c.png sonder springt wieder zu _a.png :/
 
Zuletzt bearbeitet:
Da muss ein Hund im Code sein, allerdings in deinem :-)
http://doktormolle.de/temp/btn/index.htm
Zum Vergrößern anklicken....
Ja, da könntest allerding recht haben. Keine Ahnung warum der gleiche Code bei mir nicht funkt :/ Schon langsam bin ich am verzweifeln :rolleyes:
Kann das eventuell mit meinem PHP Code liegen das die sich nicht vertragen oder was weiss ich :/

********* Edit *********

Also ich hab jetzt herum experimentiert. Und zwar, wenn ich deinen code nehme, dann funktioniert er ohne Verweise ....
Code: 
<img src="gif/home_a.png" name="btn" alt="Home" border="0"><br> 
<img src="gif/wir_a.png" name="btn" alt="Wir &uuml;ber uns" border="0"><br> 
<img src="gif/service_a.png" name="btn" alt="Service" border="0">

Wenn ich aber Verweise hinzufüge, dann funktioniert es nicht mehr :/
 
Zuletzt bearbeitet:
Welches Zielfenster haben denn deine Links?
Wenn es dasselbe Fenster ist... dann wird beim Klick logischerweise ein neues Dokument geladen, ...der Effekt ist dann wirkungslos.
 
Ich will das Thema mal wieder aufgreifen da ich grad vor dem gleichen/ähnlichen Problem stehe und eine Lösung suche.

Ich hab eine Menüleiste mit Grafikbuttons, diese wechseln beim rüberfahren mit der Maus. Das funktioniert. Nur soll das gewechselte Bild dann auch da bleiben wenn man auf den Button geklickt hat.

Solange kein Link da ist funktioniert das Script bei mir auch, aber mit Link nich mehr. Benutze das php-section-Menü

LG Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück