✔ Mousover (text) => Bild einblenden.

S

senyafin

Grünschnabel
Hallo tutorials Community,

ich bin neu hier und hoffe, dass mir jemand aus dem Forum evtl. helfen kann.
Kopfzerbrechen bereit mir folgende Situation.

Ich möchte erreichen, dass als mouseover effekt bei einem Textlink ein kleines Bildchen angezeigt wird. Beim Klick auf dieses Bild sollte dem Benutzer dann die entsprechende Website geöffnet werden.

Wäre über jede Hilfe überaus dankbar!
LG
Pascal
 
Hi Pascal,

Benutze dazu das Event OnClick und getElementById.

Zur vereinfachung hier ein Script:
HTML: 
<script>

	function ChangeImage(pURL){
		document.getElementById("MyIMG").src = pURL;
		
	}
</script>




<img border="1" src="http://download.openoffice.org/branding/images/logonew.gif" id="MyIMG">
<br>
<a href="#" onClick="ChangeImage('http://www.google.com/images/firefox/google.gif')">Hier wechselt sich das Bild</a>
<a href="#" onClick="ChangeImage('http://www.google.com/images/firefox/fox1.gif')">HUnd noch eins</a>
<a href="#" onClick="ChangeImage('http://www.google.com/images/firefox/light.gif')">Geht dir ein Licht auf?</a>
 
Danke MArc_s,

ich fange grad erst an mit html und css und dem ganzen anderen netten spielereien.
Merci für den Code, ich kann den gut gebrauchen.

Bei dem was ich aber suche wäre es nett, wenn das Bild halt nur beim Mousover eingeblendet werden würde. Weisst Du dafür vielleicht auch eine Lösung?

Wäre nett
cu
Pascal
 
Hi,

du siehst in den Elementen <A> (der Link) das Event onClick, das musste einfach ersetzen mit OnMouseOver.

Und schon wird immer die Funtion ChangeImage aufgerufen wenn die Maus über das <A> Element fährt.
Aber schau dir dazu doch mal die ganzen Events an, die es gibt

Gruss,
MArc
 
Klasse, dass ist es was ich gesucht habe, 1000 Dank!
Hast Du noch eine Idee wie man das Verschieben der Zeilen beim Anzeigen des Bildes
verhindern kann. Ich hab gelesen, es gäbe da so etwas wie Layer die sich ähnlich einem popup "drüberlegen" ?
Das wäre glaube ich optimal.

Wenn nicht, dann nochmal ganz herzlichen Dank für die Hilfe und die schnelle Reaktion
 
Hi,

du kannst ein DIV Element drüber/drunter(weiß grad nicht genau :)) legen, und diesem dann eine feste Höhe und Breite geben.

Zbs.:
HTML: 
<div style="height: 300px; width: 300px">
      <img border="1" src="http://download.openoffice.org/branding/images/logonew.gif" id="MyIMG">
</div>

MArc
 
Wenn du die Grafik-Ebene im Viewport positionierst, also aus dem Textfluss nimmst, verschiebt sich auch nichts:

Code: 
img.box {
position: absolute;
right: 0;
top: 0;
z-index: 2;
border: 1px solid #000;
}
HTML: 
<img id="MyIMG" class="box" src="http://download.openoffice.org/branding/images/logonew.gif">
 
Hallo michaelsinterface,
hallo MArc_s,

bitte entschuldigt meine vielleicht Anfängerfragen,
aber bei dem den letzten beiden Codes komme ich nicht weiter,
Habe mich zwar versucht in Div und Ebenen einzulesen,
allerdings ist das sehr mühsam. Wie gesagt, ich steh da erst ganz am Anfang.

Würde mich freuen wenn ihr ein Nachsehen hätte und mir nochmal ne kleine Hilfe gebt.

Danke Euch vielmals
Pascal
 
Vielleicht hilft es dir weiter, wenn ich mal den kompletten Quelltext der Seite poste:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<script type="text/javascript">
<!--
function ChangeImage(pURL){
                document.getElementById("MyIMG").src = pURL;
}
//-->
</script>

<style type="text/css">
<!--
div.box {
position: absolute;
right: 0;
top: 0;
z-index: 2;
}

img {
border: 1px solid #000;
}
-->
</style>

</head>
<body>

<div class="box">
     <img id="MyIMG" src="http://download.openoffice.org/branding/images/logonew.gif">
</div>

<a href="#" onmouseover="ChangeImage('http://www.google.com/images/firefox/google.gif')">Hier wechselt sich das Bild</a>
<a href="#" onmouseover="ChangeImage('http://www.google.com/images/firefox/fox1.gif')">HUnd noch eins</a>
<a href="#" onmouseover="ChangeImage('http://www.google.com/images/firefox/light.gif')">Geht dir ein Licht auf?</a>

</body>
</html>
 
Hallo michaelsinterface,

a-ja, jetzt hab ichs kapiert.
Zuerst dachte ich, dass die Position vom linken nach dem rechten Seitenrand verschoben wurde.
"Wackeln" tut da jetzt nichts mehr. Super!!

Vielen Dank für die nochmalige Hilfe.
Wenn man den Effekt jetzt noch so erzeugen könnte, dass das Bildchen genau bzw. unmittelbar neben dem jeweiligen Link positioniert wäre, könnte ich ins Wochenende gehen ;-)

Ne im Ernst - wenn dazu jemanden etwas kreatives einfällt, würde ich mich freuen.

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

Neue Beiträge

Zurück