Warum kostenlos registrieren?

Nur als registriertes Mitglied hast Du vollen Zugriff auf alle Funktionen unserer Website. So kannst Du eigene Fragen stellen und hast die volle Übersicht über neue interessante Themen im Forum.
Jetzt kostenlos registrieren.

Login


Fragen zu Javascript (onclick)

Fragen oder Probleme mit HTML, PHP oder CSS?

Fragen zu Javascript (onclick)

Beitragvon marcus24 am 10.06.2005, 00:46

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 ganz so hinbekomme wie ich will :/

Ich poste mal den Code..
Code: Alles auswählen
<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')"
onClick="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')" onClick="doHover('wir','c')"><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')"
onClick="doHover('service','c')"><img src="gif/service_a.png" name="service" alt="Service" border="0"></a><br>

..........usw..........


Ich will jetzt erzielen, das bei anklicken eines Linkes, BildXY_c.png bleibt und nicht wieder auf BildXY_a.png zurückspringt. Ich nehm einmal an, das es variablen funktioniert, nur da ich wenig bis kaum Ahnung von Javascript habe, fällt mir hierzu kein Lösungsweg ein :/
Könnte mir eventuel jemand behilflich sein? Wäre dafür sehr dankbar.
marcus24
 
Beiträge: 8
Registriert: 10.06.2005, 00:36


Beitragvon CoolCasimir am 10.06.2005, 00:54

Ehrlich gesagt verstehe ich nicht ganz was Dein Problem ist..
Woher hast Du denn die Funktion?
Und beschreibe bitte noch mal etwas genauer was wo passieren soll.

EDIT: Ok, habs verstanden. Ich schau mir da mal an.
CoolCasimir
Moderator
 
Beiträge: 2194
Registriert: 14.01.2004, 14:07
Wohnort: Hansestadt Hamburg

Beitragvon karru am 10.06.2005, 09:55

Hi Ihr's

weil ich gerade keine Lust zu arbeiten hab, dacht ich mir, ich helf mal ein bisschen... ( ;> )
Hier mal der Code:
Code: Alles auswählen
<html> <body>
<script language="JavaScript">
<!--
function doHover(ElmID, PictureName) {
   if (!document.getElementById(ElmID)) return; // wenn das element nicht existiert abbrechen
   newSrc = document.getElementById(ElmID).src;
   newSrc = newSrc.substr(0, newSrc.length - 5); // len('x.jpg') == 5
   newSrc += PictureName + '.jpg';
   document.getElementById(ElmID).src = newSrc;
}
//-->
</script>

<a href="index.php" onMouseOver="doHover('home','b')" onMouseOut="doHover('home','a')" onClick="doHover('home','c')">
<img src="home_a.jpg" id="home" alt="Home" border="0"></a> <br><br>

<a href="index.php?section=wir_ueber_uns" onMouseOver="doHover('wir','b')" onMouseOut="doHover('wir','a')" onClick="doHover('wir','c')">
<img src="wir_a.jpg" id="wir" alt="Wir &uuml;ber uns" border="0"></a> <br><br>

<a href="index.php?section=service" onMouseOver="doHover('service','b')" onMouseOut="doHover('service','a')"
onClick="doHover('service','c')"><img src="service_a.jpg" id="service" alt="Service" border="0"></a>
</body> </html>

Mir ist im wesendlichen nur ein "Fehler" aufgefallen, und zwar das:
Code: Alles auswählen
document[b].property

Das sollte man nicht mehr benutzen (und wenn dus tust dann sollte dir jemand auf die Pfoten haun), weil es afaik ne ekelige MS erfindung ist, oder wars doch Netzcape oder Opera...
Egal, Benutz es einfach nicht :)
Besser ist da:
Code: Alles auswählen
document.getElementById(id).property

Bzw.:
Code: Alles auswählen
document.getElementById("id_als_hardcoded_string").property

Und dann ist dein Code auch schon richtig. Achte darauf, dass das Element was du ansteuern willst, nartürlich auch das Attribut id gesetzt hat...
Code: Alles auswählen
<img src="images/krasshammerbild.png" id="id_des_krasshammerbilds" />


Gruß
-K-
karru
 
Beiträge: 10
Registriert: 10.06.2005, 09:41

Beitragvon marcus24 am 10.06.2005, 10:54

Hy,

@karru,
Also, ich hab jetzt deinen Code durch meinen ersetzt. Das einzige was ich ändern hab müssen, ist das ich die .jpg durch die .png ersetzt habe. Leider aber hab ich den selben effekt wie vorhin. Beim Klick eines Linkes bleibt das _c Bild nicht erhalten :(


Das sollte man nicht mehr benutzen (und wenn dus tust dann sollte dir jemand auf die Pfoten haun), weil es afaik ne ekelige MS erfindung ist, oder wars doch Netzcape oder Opera...
Egal, Benutz es einfach nicht

Danke für den Hinweis :)

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

Hmm,... ich hab herumprobiert und den Code geändert und auch der "sollte" eigentlich funktionieren. Bei mir würde er auch funktionieren, wenn ich die verlinkung auf ne andere Seite weglasse......
Code: Alles auswählen
<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">

....funktioniert es. Aber so funktioniert er nicht mehr .....
Code: Alles auswählen
<a href="index.php"><img src="gif/home_a.png" name="btn" alt="Home" border="0"></a> <br>
<a href="wir.php"><img src="gif/wir_a.png" name="btn" alt="Wir &uuml;ber uns" border="0"></a> <br>
<a href="service.php"><img src="gif/service_a.png" name="btn" alt="Service" border="0"></a>

Hat wer ne ahnung warum?
marcus24
 
Beiträge: 8
Registriert: 10.06.2005, 00:36

Beitragvon karru am 10.06.2005, 15:48

Jop :)
Wenn du document.getElementById benutzt muss dein Code folgendermaßen aussehen
(ich poste mal den ganzen code, welcher funktionieren "sollte" ;)):
Code: Alles auswählen
<script language="JavaScript">
<!--
function doHover(ElmID, PictureName) {
   if (!document.getElementById(ElmID)) return;
   newSrc = document.getElementById(ElmID).src;
   newSrc = newSrc.substr(0, newSrc.length - 5); // len('x.png') == 5
   newSrc += PictureName + '.png';
   document.getElementById(ElmID).src = newSrc;
}
//-->
</script>

<a href="index.php" onMouseOver="doHover('home','b')" onMouseOut="doHover('home','a')"
onClick="doHover('home','c')"><img src="gif/home_a.png" id="home" alt="Home" border="0"></a><br>

<a href="index.php?section=wir_ueber_uns" onMouseOver="doHover('wir','b')" onMouseOut="doHover('wir','a')"
onClick="doHover('wir','c')"><img src="gif/wir_a.png" id="wir" alt="Wir &uuml;ber uns" border="0"></a><br>

<a href="index.php?section=service" onMouseOver="doHover('service','b')" onMouseOut="doHover('service','a')"
onClick="doHover('service','c')"><img src="gif/service_a.png" id="service" alt="Service" border="0"></a><br>


Bei deinem Code hatten die Bilder kein id=""... (hatte ich vergessen nochmals zu betonen...)
Probier das mal...

Gruß Karru


*** EDIT ***

Ok, post nochmals gelesen...
Wenn du die Effekte nur bei den Bilder haben willst, also ohne Link, dann sollte das so aussehen:
Code: Alles auswählen
<img src="gif/service_a.png" id="service" alt="Service" border="0" onMouseOver="doHover('service','b')" onMouseOut="doHover('service','a')"
onClick="doHover('service','c')" />


Hoffe hab das getroffen was du meintest :)

-K-
karru
 
Beiträge: 10
Registriert: 10.06.2005, 09:41

Beitragvon marcus24 am 10.06.2005, 16:04

Ja hab ich. Und ich hab auch davor die id hinzugefügt. Funktioniert einfach nicht wenn ich die seiten miteinander verlinken will. Ohne diese <a href="xx.php"></a> funktioniert es.
Ich will aber, das dieser effekt auch funktioniert, wenn ich die seiten miteinander verlinke :/

hier mal die Beispiele zu deinem Code:

Mit verlinkung
Ohne Verlinkung


********** EDIT **********

Nein Karru, Ich will diesen Effekt eh bei den Links haben, nur geht das nicht mit dem Code den du gepostet hast. Probiers doch mal aus. Vielleich muss man jeder einzelnen seiten auch eine ID zuweisen oder was weiss ich warums mit verlinkung nicht funktioniert :cry:
marcus24
 
Beiträge: 8
Registriert: 10.06.2005, 00:36

Beitragvon karru am 10.06.2005, 16:26

So...
Das tut bei mir wunderprächtig:
Code: Alles auswählen
<!--
function doHover(ElmID, PictureName) {
   if (!document.getElementById(ElmID)) return;
   newSrc = document.getElementById(ElmID).src;
   newSrc = newSrc.substr(0, newSrc.length - 5); // len('x.png') == 5
   newSrc += PictureName + '.png';
   document.getElementById(ElmID).src = newSrc;
}
//-->
</script>

<a href="#"><img src="gif/home_a.png" id="home" alt="home" border="0" onMouseOver="doHover('home','b')" onMouseOut="doHover('home','a')"
onClick="doHover('home','c')" /></a>
<br />

<a href="#"><img src="gif/wir_a.png" id="wir" alt="wir" border="0" onMouseOver="doHover('wir','b')" onMouseOut="doHover('wir','a')"
onMouseDown="doHover('wir','c')" /></a>
<br />

<a href="#"><img src="gif/service_a.png" id="service" alt="Service" border="0" onMouseOver="doHover('service','b')" onMouseOut="doHover('service','a')" onMouseDown="doHover('service','c')" /></a>
<br />


(der Unterschied, falls nicht bekannt, zwischen <br> und <br /> oder <img> <img />, das erste is html das zweite xhtml...)

Karru
karru
 
Beiträge: 10
Registriert: 10.06.2005, 09:41

Beitragvon marcus24 am 10.06.2005, 19:14

Keine Ahnung was du machst das es funktionier und was ich falsch mache, das es nicht funktioniert :( Dabei hab ich deinen Code Kopiert. Bild_c.png bleibt bei mir nur beim geklickter Maustaste aktiv. Beim loslassen zeigt er wieder Bild_a.png an. Oder ich bin einfach zu dumm dafür :cry:
marcus24
 
Beiträge: 8
Registriert: 10.06.2005, 00:36

Beitragvon karru am 11.06.2005, 14:15

Genau das macht der Code auch :)

bild_a - Das normale Bild.
bild_b - Das Bild wenn man mit der Maus drüber geht
bild_c - Das Bild wenn drauf geklickt wird

Wie genau hättest du es genau? :)

-K-
karru
 
Beiträge: 10
Registriert: 10.06.2005, 09:41

Beitragvon marcus24 am 11.06.2005, 14:29

Naja, dass das Bild_c beim draufklicken, geklickt bleibt und sich erst wieder verändert, wenn man einen anderen Link klickt.
marcus24
 
Beiträge: 8
Registriert: 10.06.2005, 00:36

Beitragvon karru am 11.06.2005, 14:51

Dann müssen die (hier 3) Seiten folgendermaßen aussehen:

(Du musst in jede seite das Javascript reinkopieren, aber das Spare ich mir hier einmal um das etwas übersichtlicher zu halten...)

Beispielseite Home.php:
Code: Alles auswählen
<img src="gif/home_c.png" id="home" alt="home" border="0" /></a> <br />
<a href="#"><img src="gif/wir_a.png" id="wir" alt="wir" border="0" onMouseOver="doHover('wir','b')" onMouseOut="doHover('wir','a')"
onMouseDown="doHover('wir','c')" /></a> <br />
<a href="#"><img src="gif/service_a.png" id="service" alt="Service" border="0" onMouseOver="doHover('service','b')" onMouseOut="doHover('service','a')" onMouseDown="doHover('service','c')" /></a>
<br />

Beispielseite Wir.php:
Code: Alles auswählen
<a href="#"><img src="gif/home_a.png" id="home" alt="home" border="0" onMouseOver="doHover('home','b')" onMouseOut="doHover('home','a')"
onClick="doHover('home','c')" /></a> <br />
<img src="gif/wir_c.png" id="wir" alt="wir" border="0" /> <br />
<a href="#"><img src="gif/service_a.png" id="service" alt="Service" border="0" onMouseOver="doHover('service','b')" onMouseOut="doHover('service','a')" onMouseDown="doHover('service','c')" /></a> <br />

Beispielseite Service.php:
Code: Alles auswählen
<a href="#"><img src="gif/home_a.png" id="home" alt="home" border="0" onMouseOver="doHover('home','b')" onMouseOut="doHover('home','a')"
onClick="doHover('home','c')" /></a> <br />
<a href="#"><img src="gif/wir_a.png" id="wir" alt="wir" border="0" onMouseOver="doHover('wir','b')" onMouseOut="doHover('wir','a')"
onMouseDown="doHover('wir','c')" /></a> <br />
<img src="gif/service_c.png" id="service" alt="Service" border="0" /> <br />


Ich glaube(/hoffe ;)) das ist es was du meinst...

-K-
karru
 
Beiträge: 10
Registriert: 10.06.2005, 09:41

Beitragvon marcus24 am 11.06.2005, 15:40

Ja genaus das mein ich. Nur wär da ein Problem dabei und zwar, das ich diese variante nicht funktioniert, wenn ich dann mit PHP frames simuliere (wie im ersten post schon erwähnt).
Ich denke, wenn ich den "Bildertausch" mit PHP mache, doch eine besser Lösung wäre. Oder was meinst du?

(Sorry das ich dir solche umstände mache :roll: )
marcus24
 
Beiträge: 8
Registriert: 10.06.2005, 00:36

Beitragvon karru am 11.06.2005, 21:38

Ich hätte mir dein erstes Posting genauer durchlesen sollen... :)

Code: Alles auswählen
<script>
<!--
function doHover(ElmID, NewPicMode) {
  // aktuellen bildpfad speichern
  newSrc = document.getElementById(ElmID).src;

  // herrausfinden in welchem 'modus' das bild, welches
  // die aktion ausgelöst hast, ist
  CurPicMode = newSrc.substr(newSrc.length - 5, 1);

  // wenn es das aktuelle das aktiv bild ist, dann dann abbrechen...
  if (CurPicMode == 'c') return;

  // wenn ein bild als geklickt markiert werden soll,
  // dann vorher alle bilder zurücksetzen
  if (NewPicMode == 'c') {
    // alle bilder zurücksetzten
    document.getElementById("home").src = "gif/home_a.png";
    document.getElementById("wir").src = "gif/wir_a.png";
    document.getElementById("service").src = "gif/service_a.png"
  }

  // neuen bildpfad herstellen
  newSrc = newSrc.substr(0, newSrc.length - 5);
  newSrc += NewPicMode + '.png';
  // und setzten
  document.getElementById(ElmID).src = newSrc;
}
//-->
</script>

<a href="#"><img src="gif/home_a.png" id="home" alt="home" border="0"
onMouseOver="doHover('home','b')" onMouseOut="doHover('home','a')" onClick="doHover('home','c')" /></a>

<a href="#"><img src="gif/wir_a.png" id="wir" alt="wir" border="0"
onMouseOver="doHover('wir','b')" onMouseOut="doHover('wir','a')" onClick="doHover('wir','c')" /></a>

<a href="#"><img src="gif/service_a.png" id="service" alt="Service" border="0"
onMouseOver="doHover('service','b')" onMouseOut="doHover('service','a')" onClick="doHover('service','c')" /></a>


-K-
karru
 
Beiträge: 10
Registriert: 10.06.2005, 09:41



Ähnliche Themen


Zurück zu HTML, PHP & Co.

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste