[JavaScript] Bild verändern

naitSirch · 19. Dezember 2004

Hallo,

ich hab' mal ne Frage an alle die sich mit JavaScript auskennen. Und zwar würde ich gern wissen, wie man ein Bild verändern bzw. mit einem anderen Bild austauschen kann.

Und zwar möchte ich in meinem Menü schriftliche Links haben und wenn man mit der Maus darüberfährt, verändert sich ein kleines Bild was sich links daneben befindet, allerdings ist der Link und das Bild in zwei verschiedenen Tabellenspalten.

Könnte mir jemand einen Tipp geben, wie ich das Problem lösen kann? Danke schonmal.

greetz, naitSirch

V1tzl1 · 19. Dezember 2004

Versuchs mal mit http://de.selfhtml.org/javascript/beispiele/buttons.htm ...

naitSirch · 19. Dezember 2004

Ja, das kenne ich auch schon

aber da wird nur erklärt, wie man ein Bild verändert was auch gleichzeitig ein Link ist, aber ich will ja ein Bild verändern, was außerhalb des Link-Tags ist.

Loopo · 19. Dezember 2004

Gib dem Bild ein id-Attribut und dann greif über die ID zu.

V1tzl1 · 19. Dezember 2004

Du brauchst beim link ja keine src angeben, dann führt der link nich weiter, dann weiß aber jeder, dass was passiert, wenn er seine Maus dahin bewegt und wenn du das nich möchtest, kannst du die onMouseOver und out sachen auch dem img tag unterordnern oder?

naitSirch · 20. Dezember 2004

Also hab jetzt mal ein bisschen ausprobiert.
Aber bekomm das noch nicht so recht hin. Schaut euch mal den Code an:

HTML:

<script type="text/javascript"> 
<!--
function Bildwechsel(BildID) {
 getElementById(BildID).src = "bla.gif"
}
function Bildwechsel2(BildID) {
 getElementById(BildID).src = "http://home.pages.at/naitsirch/index/bilder/eck.gif"
}
//-->

<img id="eck1" src="http://home.pages.at/naitsirch/index/bilder/eck.gif">
<a href="index.html"
    onMouseOver="Bildwechsel(eck1)"
    onMouseOut="Bildwechsel2(eck1)">
<b>Home</b></a>

Der Script-Bereich steht nicht im Header, ist das schlimm?
Ich muss dazu sagen, dass ich noch ein JavaScript - Newbie bin, also bitte nicht schlagen wenn ich dumme Fehler eingebaut habe.

Wär schön wenn ihr mir helfen könntet.

naitSirch

Loopo · 20. Dezember 2004

schreib mal statt

PHP:

Bildwechsel(eck1)

PHP:

Bildwechsel('eck1')

bzw. das gleiche bei Bildwechsel2

naitSirch · 20. Dezember 2004

Hm... ich habe es jetzt so ausprobiert:

HTML:

<script type="text/javascript"> 
<!--
function Bildwechsel(BildID) {
 getElementById(BildID).src = "index/bilder/eck-grau.gif"
}
function Bildwechsel2(BildID) {
 getElementById(BildID).src = "index/bilder/eck.gif"
}
//-->
</script>

<table>
  <tr valign="top"><td width="20"><img id="eck1" src="index/bilder/eck.gif"></td>
    <td bgcolor="#004592">
    <a href="index.html"
    onMouseOver="Bildwechsel('eck1')"
    onMouseOut="Bildwechsel2('eck1')"><b>Home</b></a></td></tr>
</table>

so hab ich dass jetzt stehen (ich hoffe das mit den Anfürungszeichen ist so richtig ?). Ich habe noch ein Paar änderungen vorgenommen wegen der Quellen und so. Aber getan hat sich da noch nichts, das Bild bleibt immer noch stur

. Hab jetzt auch mit 'reingeschrieben, dass es in einer Tabelle eingebunden ist, aber das kann ja auch nicht der Grund für den Fehler sein.

Hatte es egentlich einen Grund, dass du "PHP Code" benutzt hast?

Raechaer · 20. Dezember 2004

Warum genau es nicht funktioniert kann ich dir leider nicht sagen, aber so funktioniert's bei mir mit Firefox (IE hab ich nicht getestet):

HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='de' >
 <head>
  <script type="text/javascript"> 
  // <![CDATA[
  <!-- 
   function Bildwechsel(BildID)
   {
    document.getElementById(BildID).src = "index/bilder/eck-grau.gif";
   }
     
   function Bildwechsel2(BildID)
   {
    document.getElementById(BildID).src = "index/bilder/eck.gif";
   }
  //-->
  // ]]>
  </script>
  <title>Test</title>
 </head>
 <body>
  <table>
   <tr valign='top'>
    <td><img id='eck1' alt='' src='index/bilder/eck.gif' /></td>
    <td><a href='index.html' onmouseover='Bildwechsel("eck1")' onmouseout='Bildwechsel2("eck1")'>Home</a></td>
   </tr>
  </table>
 </body>
</html>

naitSirch · 21. Dezember 2004

Tatsächlich, so funktioniert es.

Allerdings ist jetzt ein Menü-Balken (oder wie man das auch immer nennen sollte) total fett geworden....

Aber ich denke das bekomm ich auch noch hin

Falls ihr euch das Ergebnis anschauen wollt: http://jugend-kss.de.vu
Dann könnt Ihr mir vielleicht auch ein Tipp, wegen dem Balken geben, falls ich es bis dahin noch net hinbekommen habe

Vielen Dank für die Hilfe.

Gruß, naitSirch

hurga_gonzales · 23. Dezember 2004

Hi,

Raechers code funktioniert sicher auch mit dem IE.

BTW: IMMER zuerst mit dem IE testen. 92%-ige User-Abdeckung ist wichtiger als Dein Rechner und/oder der Rechner Deiner Freunde.

Übrigens kann der Firefox (der erste Browser, den ich das machen habe sehen) auch eine ganze Menge IE-eigenes Zeugs. Da ist die Trennung nicht mehr so groß.

Hurga

naitSirch · 23. Dezember 2004

Jo stimmt.

Mit IE funktioniert es...
Schade das Firefox noch nicht alles drauf hat, ich hoffe das kommt noch. Teilweise hat Firefox auch Probleme mit CSS, z.B. der Befehl

HTML:

<td style="clear:all">

Danke euch allen für eure Hilfe.

Gruß, naitSirch

Suche

[JavaScript] Bild verändern

naitSirch

Cadet 3rd Year

V1tzl1

Lt. Junior Grade

naitSirch

Cadet 3rd Year

Loopo

Admiral

V1tzl1

Lt. Junior Grade

naitSirch

Cadet 3rd Year

Loopo

Admiral

naitSirch

Cadet 3rd Year

Raechaer

Lt. Junior Grade

naitSirch

Cadet 3rd Year

hurga_gonzales

Captain

naitSirch

Cadet 3rd Year

Ähnliche Themen