Textlink und Anzeige Grafiken

**Rumo** · 17.06.2005, 17:27

mit onmouseover, onmouseout und der src-Eigenschaft des Image_objekts.
Oder passt dann die Position nimmer?
Wenn nicht: hast du <img ... style="position:absolute">?

**IceT** · 17.06.2005, 17:33

hmm

Doch ich habe position absolute, aber ich habe ja kein img objekt mit dem ich mouseover machen könnte.
Ich habe ja lediglich einen Textlink.

**Rumo** · 17.06.2005, 17:38

ach so, ja dann... onmouse-etceteras gehen ja auch nur bei bildern
Verflixt! wenn man sowas doch nur bei links machen könnte!!!
naja, programmieren ist eben mühsam

**IceT** · 17.06.2005, 17:39

Ich habe das schon mal irgendwo gesehen, dass müsste mit dhtml oder javascript gehen, bloss wie ist die Frage!

**Rumo** · 17.06.2005, 17:45

Also Klartext:
1. ein bild mit name="bildname"
2. ein Link mit onmouseover="src-eigenschaft-des-bildes-'bildname'-auf-'dieunddieadresse'-ändern"
3. bei onmouseout obiges mit der alten adresse

das mnüsste doch mit Hilfe von SelfHTML->JavaScript zu schaffen sein!

P.S.: DHTML ist noch viel komplizierter

OffTopic:
Als ob man das jetzt kompliziert nennen könnte

**prego** · 17.06.2005, 19:27

Warum eigentlich für sowas JavaScript ausgraben???

Man kann es auch komplett in CSS lösen...

http://www.triebschicht.de/spielwiese/textlink/

habsch ma kurz zusammen gecodet....

Falls man will, das der Bereich in dem das Bild ist für den Link benutzt wird und der Text sich dann nach rechts bewegt wenn der link gehovert wird, muss man statt visibility: hidden/visible auf display: none/block zurückgreifen...

**prego** · 17.06.2005, 19:35

AUTSCH!!!!! Ich depp, sag mir doch einer, das das Bild nicht im A-Tag ist. Arg, wer lesen kann ist klar im Vorteil.... Manno.....

Das wirst du leider mit JavaScript lösen müssen.

so zum Beispiel:

Code:

<script type="text/javascript">
/* JavaScript Funktion */

bilder = new Object();
bilder['start'] = 'startbild.gif';
bilder['auto'] = 'auto.gif';

function putImage(imgtag, name){
  document.getElementsByName(imgtag)[0].src = bilder[name];
}
</script>


/* HTML CODE */

<img name="bildecke" src="startbild.gif"/>

<a href="#" onmouseover="putImage('bildecke', 'auto')" 
onmouseout="putImage('bildecke', 'start')">Autos</a>

**Rumo** · 17.06.2005, 19:40

OffTopic:
Verrat docch nich gleich alles!

**prego** · 17.06.2005, 19:41

Ach, bin heut im Schreiblaune - hätt ich das erste Beispiel nicht schon sinnloserweise gecodet hätt ich grad noch en Demo gemacht....

**prego** · 17.06.2005, 19:43

Aber so die optimale Lösung ist das ja auch nicht, weil das Bild dann immer erst beim onmouseover geladen wird. Sinniger ist es div's ein und auszublenden....

Also ist das Ding nicht perfekt - sollte nur ein Ansatz sein...

**Rumo** · 17.06.2005, 19:48

Code:

<script type="text/javascript">

var bilder = new Array();
bilder['start'] = new Image(); 
bilder['start'].src = 'startbild.gif';
bilder['auto'] = new Image();
bilder['auto'].src = 'auto.gif';

function putImage(imgtag, name){
  document.getElementsByName(imgtag)[0].src = bilder[name].src;
}
</script>
<img name="bildecke" src="startbild.gif"/>
<a href="#" onmouseover="putImage('bildecke', 'auto')" 
onmouseout="putImage('bildecke', 'start')">Autos</a>

So werden die Bilder gleich beim Laden der Seite im wie-heißt-der-Fachbegriff-doch-gleich des Browsers ab-/zwischengespeichert.

EDIT:
Darüber kann man sich allerdings auch streiten, weil das bei großen bildern dann länger dauert.

**prego** · 17.06.2005, 19:49

preload meinst du, aber die idee ist echt gut.... image kannte ich so noch garnicht....

**Rumo** · 17.06.2005, 19:59

is auch erst ab JS 1.1... also dodal modern

Naja, das es mehr dazumal wieder hier gibt, muss ich wohl nicht sagen.

Textlink und Anzeige Grafiken