• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 Grafiken Hover

R

raseac

Neues Mitglied
Hey, ich habe ein Problem und hoffe, dass ihr mir helfen könnt.
Vorweg: Ich habe bereits gesucht und teilweise was gefunden, aber nichts, was mir wirklich weitergeholfen hat.
Mein Problem ist folgendes:
Ich habe mir 2 Grafiken erstellt (als Buttons). Die eine heißt "home.png" die andere "home2.png".
Nun möchte ich, dass wenn man auf der seite auf home hovert, dass dann der button sich ändert in "home2.png". Nur leider habe ich keine ahnung, wie ich das machen soll.
Hier mal mein HTML- Code

<a href="main.html"><img src="Images/Home.png" border="0" height="35" ><br></a>

Noch etwas: Ich muss HTML verwenden, für die Schule. Und ich bin anfänger ;D Ich hoffe ihr versteht mein Problem und könnt mir helfen ;)
 
Ich glaube das das mit Normalem HTML gar nicht geht.
Eher mit Java S. ...
Aber da kenne ich mich nicht sonderlich aus .
Ich denke irgendeine if() goto() anwendung.
Sorry
 
Üblich ist, dass man dem Image-Objekt bei den Events onmouseover und onmouseout eine Funktion zuordnet, beispielsweise
HTML: 
<img src="Images/Home.png"  border="0" height="35" 
onmouseover="otherImage(this);" onmouseout="originalImage(this);" >
Diese Funktionen setzen dann im Image Object (this) den Wert für die Property src (Pfad zum Bild) dynamisch. Dabei lädt man die Bilder meist schon vorab, um zu vermeiden, dass beim mouseover eine Verzögerung kommt. Geht man über das Bild, wird Home2 gesetzt, geht man wieder raus, so wird wieder Home gesetzt. Knapp geschrieben könnte es so aussehen:

HTML: 
<img src="Images/Home.png"  border="0" height="35" 
onmouseover="this.src='Images/Home2.png';" onmouseout="this.src='Images/Home.png';" >

Ob das ohne Javascript mit reinem HTML und CSS geht, weiß ich nicht.

prajuritbs schrieb:
Ich denke irgendeine if() goto()
Zum Vergrößern anklicken....
GOTO, das ist ja fast noch schlimmer, als Tabellen für's Layout vorzuschlagen :mrgreen:
 
Zuletzt bearbeitet:
Danke schonmal.

Ich habe das mal von NetAktiv probiert und es tut sich immerhin schon was. wenn ich drauf gehe, ändert sich der button sogesehen schon, aber leider so, als wäre der pfad nicht richtig. also ein weißes viereck mit rotem x. Muss ich vllt noch was ändern? ich habe das jetzt so geschrieben:

<a href="main.html"><img src="Images/Home.png" border="0" height="35" onmouseover="this.src='home2.png';" onmouseout="this.src='home.png';" ><br></a>

also einfach mal reinkopiert. muss ich jetzt noch irgendwie "this.src" ändern, also etwas hinschreiben oder so? weil, so wie jetz kommt , wie gesagt, das weiße viereck mit dem roten x.
 
warst zu schnell, der pfad Images/ hatte vor der Grafik gefehlt, hattest also die richtige Vermutung. Hab es oben korrigiert. Aber wie gesagt, das ist kein reines HTML, also eventuell eine nicht zugelassene Lösung.
 
Nein, ist es nicht. Das this.src=Bildpfad ist Javascript. Man kann es im Browser verwenden, aber es gehört nicht zur HTML Spezifikation. Manche schalten es auch aus Angst vor Computerviren ab. Grob gesagt beschreibt HTML die Dokumentenstruktur und die erlaubten Elemente (wie <table>, <img>, ...) und mit Javascript kann man ein geladenes Dokument dann dynamisch verändern, muss sich dann aber natürlich an die html-Spezifikation halten. Statt Javascript kann man (zumindest im IE) auch andere Scriptsprachen verwenden wie VBScript.
 
Okay. ich hoffe, dass es meinen lehrer nicht weiter stören wird ;D
Nochmals Danke. Funktioniert jetzt alles wunderbar :)
 
Habe ich das jetzt falsch verstanden oder wäre das nicht auch mit CSS realisierbar (background bei hover ändern)?
 
@ Elroy: Es ging darum, das BILD zu ändern, nicht nur die Farbe eines Links. Wenn du weißt, wie man die ursprüngliche Fragestellung mit CSS löst, dann her damit.

@Caelus: Farben kann man mit CSS ändern, ich kenne keine Lösung für Bilder. Klar kann man beim hover ein (vorher verstecktes) div (mit dem 2. Bild) an beliebiger Position einblenden. Aber wie man dann genau über das erste Bild legt und ob es stehen bleibt, weiß ich nicht. Ich hab auch keinen Bedarf, eine zweite Lösung zu suchen, wenn ich eine funktionierende habe. Wer kein Javascript will, muss halt auf manches verzichten, und damit lebe ich.
 
Zuletzt bearbeitet:
Hallo.

Dein Problem ist ja das du keine Lösung ohne Javascript hast.
Was du verwendest hängt ganz von deinen Vorlieben ab. Wenn du lieber eine JS Lösung verwenden willst möchte ich dich bestimmt nicht davon abhalten.
Ich wollte nur zeigen das es auch anders geht.

Auch wenn es dich nicht interessiert poste ich den Link mal für die die eine CSS Lösung suchen.

WebDesign - Tips und Tricks: Bildwechsel clever mit CSS

Gruss
Elroy
 
Hat mir keine Ruhe gelassen und ich hab die oben formulierte Idee mal versucht, auch umzusetzen, indem ich einen Anker um die Bilder gesetzt habe (mit anderen Container Elementen wie <span> ging das auch, ebenso mit geeigneter relativer Positionierung):
HTML: 
<style type="text/css">
  #ia:hover #i2 { visibility:visible ;}
  #i1  { position:absolute; top: 200px; left:200px;  }
  #i2  { position:absolute; top: 200px; left:200px; visibility:hidden; }
</style>

...

<a id="ia" href="#">
<img id="i1" alt="i1" height="50" src="i1.jpg" width="50" />
<img id="i2" alt="i2" height="50" src="i2.jpg" width="50" />
</a>
Der von Elroy angegeben Link geht einen anderen Weg und definiert das eine Bild als Background des Links und setzt das andere dann invisible. Das hat natürlich den Vorteil, dass man sich um die Position weniger Gedanken machen muss.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben