[HTML] Bei Mouseover Bild anzeigen lassen

orbit · 4. November 2005

Hallo,

ich möchte gerne das ein Bild geladen wird wenn man über ein bestimmtes Wort geht. Wie kann ich das machen?

Thx schonmal.

IRID1UM · 4. November 2005

AW: Bei Mouseover Bild anzeigen lassen

in welcher programmiersprache?
mfg
IRID1UM

gustl87 · 5. November 2005

AW: Bei Mouseover Bild anzeigen lassen

baust du gerade eine homepage ?

ich war auch gerade an der arbeit ... und habe gerade eben dazu ein script gefunden^^

java:

<script type="text/javascript" language="JavaScript">

</script>

<p><a href="ZIEL DES LINKS.htm" target="LINK EIGENSCHAFT (_self/_blank/...)"
ONMOUSEOVER="hiLite('i01','i01h');
window; return true"
ONMOUSEOUT="hiLite('i01','i01')"><img name="i01" src="BILD 1 NAME" width="BILD X" height="BILD Y" border="0" alt=""></a>
</p>

also der obere teil kommt in den head und der untere in den body
i01 und i01h ist jeweils die nummer des bilderpaars^^ i01 ist vom bilderpaar 1 das standardbild und i01h ist das highlight bild vom paar 1.

natürlich musst du noch die bildnamen und die bildgrößen in die jeweils beschriebenen " " einsetzen und das was drin steht (es dient der erläuterung) rauslöschen/ersetzen.

edit: bei bildnamen natürlich in *.* form also mit formatendung.

-gb-

ronny1978 · 5. November 2005

AW: Bei Mouseover Bild anzeigen lassen

Hey ich glaube so müsste es gehen. Jedenfalls macht es das was du beschrieben hast.
Ein wenig muss das Script noch an deine Gegebenheiten angepasst werden

orbit · 5. November 2005

AW: Bei Mouseover Bild anzeigen lassen

ronny1978 schrieb:
Hey ich glaube so müsste es gehen. Jedenfalls macht es das was du beschrieben hast.
Ein wenig muss das Script noch an deine Gegebenheiten angepasst werden

So in etwa soll es sein aber das Bild soll angezeigt bleiben wenn man auf dem Text mit der Maus bleibt, das Bild wird mir hier nur eine Milisekunde angezeigt und ist weg.

Floele · 5. November 2005

Naja, warum einfach wenn's auch kompliziert geht?

Mein Vorschlag:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
  <title>XHTML 1.0</title>
  <style type="text/css">
  a img {
  border:0;
  width:0;
  height:0;
  }
  
  a:hover img {
  position:absolute;
  width:128px;  /* Originalgröße */
  height:128px;
  }
  
  a:hover {
  background:none; /* IE */
  }
  </style>
 </head>
 <body>
 <p><a href="#"><img src="img/01.jpg" alt="Bild" />Ein Text</a> und noch ein bisschen mehr.</p>
 </body>
</html>

ronny1978 · 5. November 2005

Floele deins ist ne bessere Lösung

dafür.
Mein Verändertes Beispiel: mit setTimeout()

spacedani · 5. November 2005

Je nachdem mit was du es machst is es doch wirklich nicht schwer!

Ich mache meine Webseiten mit Dreamweaver, da gibt es so nützliche Tools wie "Rolloverbild einfügen".

Wäre doch was, oder?

orbit · 6. November 2005

@Floele

Genau sowas hab ich gesucht. Vielen dank erstmal an alle. Hab jetzt nur noch ein Problem, die Bilder haben nicht immer die gleich Größe. Mal sind sie 200x198, dann mal wieder 180x125...

Kann ich irgendwie einstellen das die Größe automatisch angepasst wird?

Floele · 6. November 2005

Mit ein klein wenig mehr Aufwand geht es. Ohne den IE gäbe es natürlich schönere Lösungen...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
  <title>XHTML 1.0</title>
  <style type="text/css">
  a span {
  display:none;
  }
  
  a:hover span {
  display:block;
  position:absolute;
  }
  
  a:hover {
  background:none;
  }
  </style>
 </head>
 <body>
 <p><a href="#"><span><img src="img/01.jpg" alt="Bild" /></span>Ein Text</a> und noch ein bisschen mehr.</p>
 </body>
</html>

orbit · 6. November 2005

Cool, vielen dank nochmal.

Benjamin_L · 6. November 2005

AW: Bei Mouseover Bild anzeigen lassen

gustl87 schrieb:
...java...
...document.images[imgID].src...
...ONMOUSEOVER...
...standart...

1. Es besteht ein riesen Unterschied zwischen Java und Javascript. Es handelt sich um zwei völlig verschiedene Programmiersprachen.

2. document.all ist kein Javascript Standard. Es muss document.getElementById(id).src heissen

3. Um für XHTML gerüstet zu sein, sollte man die Großschreibweise gleich am Anfang sein lassen.

4. Es heisst Standar"d".

gustl87 · 6. November 2005

wie soll ich das jetzt verstehen ?

ok dann ist es halt kein java sondern java script, aber desshalb funktioniert es trotzdem ...

wenn du das bezweifelst, dann kann ich dir gerne eine kleine testseite schicken^^

-gb-

Floele · 6. November 2005

Dinge die funktionieren sind nicht zwangsläufig gut.

gustl87 · 6. November 2005

und ? was soll daran jetzt nicht "gut" sein ?

das ziel war, dass der button (ein bild) bei der aktion mouseover durch ein anderes bild ersetzt wird - und das ziel erreicht das script und nicht mehr.

und es finktioniert beim opera, firefox, netscape und ie - und das reicht mir.

-gb-

V1tzl1 · 7. November 2005

Was Benjamin versucht dir zu sagen ist nicht, dass du schlecht bist, weil du java und javascript verwechselt hast, oder das dein script nicht funktioniert. Es gibt aber bestimmte vorlagen, wie ein Javascript aussehen sollte. document.all ist wie er gesgt hat veraltet, genau so wie das großschreiben. Es wird sicherlich bald ein reiner xml browser auf den markt kommen, spätestens dann wird deine seite nicht mehr funktionieren, zur zeit unterstützen deine benutzten befehle noch alle (korrigiert mich bitte, wenn ich mich irre) aber irgentwann wird dein benutzter befehl total veraltet sein, also warum nicht gleich den neuen nehmen?

gustl87 · 7. November 2005

ok danke dass du mir das mal genau erklärt hast - wusste nicht was daran unsauber sein sollte^^...

ich habe das script von einem freund der mir öfters bei schwierigen problemen mit meiner hp aus der patsche hilft.

aber nochmals danke ! dann werde ich bald mal ein neues script in meine hp einbauen^^

-gb-

camouflage81 · 7. Februar 2016

Floele schrieb:

Mit ein klein wenig mehr Aufwand geht es. Ohne den IE gäbe es natürlich schönere Lösungen...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
  <title>XHTML 1.0</title>
  <style type="text/css">
  a span {
  display:none;
  }
  
  a:hover span {
  display:block;
  position:absolute;
  }
  
  a:hover {
  background:none;
  }
  </style>
 </head>
 <body>
 <p><a href="#"><span><img src="img/01.jpg" alt="Bild" /></span>Ein Text</a> und noch ein bisschen mehr.</p>
 </body>
</html>

Hey zusammen,

der Code funktioniert wunderbar.
Ich hab den Teil:
a:hover span {
display:block;
position:absolute;
}
noch mit left und top erweitert, so dass das Bild an einer bestimmten Position angezeigt wird.

Nun möchte ich dass das Bild beim überfahren eines Links im Dropdownmenü an der angegeben Stelle angezeigt wird.
verwendet wird folgendes Drop-Down Menü.
Leider kann ich wegen irgendeiner Whitelist den Link für den Download nicht posten.
Gebt Ihr dies: "48 Free Dropdown Menu In HTML5 And CSS3" bei Google ein, ist es der erste Link der gefunden wird.
Von dieser Seite kann man das Menü downloaden.

Ich möchte nun, dass das Bild z.B. beim Drop-Down-Menü "3 Clomuns" bei einem Link angezeigt wird.
Wenn ich alles einfüge, wird das Bild nicht auf der Seite angezeigt. Es erscheint lediglich ein komischen Symbol über dem Link bzw. im Rahmen des Links.
Vermutlich versucht der Explorer, das Bild im Rahmen des Links zu öffen. Hier ist aber kein Platz für das Bild.

Kann mir hier jemand weiterhelfen..?

Besten Dank..

Gruß

camouflage81 · 9. Februar 2016

Hat keiner eine Idee was ich machen könnte...?

Gruß

[HTML] Bei Mouseover Bild anzeigen lassen

Ensign

Commodore

Commander

Cadet 4th Year

Anhänge

Ensign

Cadet 3rd Year

Cadet 4th Year

Anhänge

Newbie

Ensign

Cadet 3rd Year

Ensign

Commander

Commander

Cadet 3rd Year

Commander

Lt. Junior Grade

Commander

Newbie

Newbie

Ähnliche Themen