• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Bilder mit a:hover austauschen

D

die_kiwi

New member
Hallihallo,

ich will für meine Homepage folgendes mit CSS realisieren:

Wenn man über einen Menüpunkt (Text) fährt, soll in einem div ein Bild angezeigt werden. Das Div kann überall auf der Seite liegen.
Ich habe schon vieles gesucht/gefunden...wieder verworfen...aber ich sehe da nicht durch. Einfach wäre es ja, wenn ich das Hintergrundbild ändern würde...aber wie ich das Bild in DAS bestimmte div bekomme, ist mir momentan ein Rätsel. Ich weiß nur, dass ich das mit a:hover realisieren kann...

Danke schon mal im Vorraus!
 
du könntest das mit javascript lösen
Code: 
<img src="xyz_klein.gif" onmouseover="showFullSize()" onmouseout="hideFullSize()" />
<div id="divFullSize" style="visiblity: hidden">
</div>
JS Bild als Background::
PHP: 
<script type="text/JavaScript">
function showFullSize() {
  myDiv=document.getElementById('divFullSize');
  myDiv.style.visibility="visible";
  myDiv.style.backgroundimage="xyz_gross.jpg";
}
function hideFullSize() {
  myDiv.style.visibility="hidden";
}
</script>
 
Also mit deinem Script komm ich erstma gar nicht hin. Das Bild ist sofort da und es passiert auch nix beim hovern...

Das Bild sollte beim Aufruf der Seite noch nicht da sein. Es erscheint erst, wenn ich über einen Link fahre. Dann wird das Bild ganz normal - nicht als Background und nix - angezeigt.

Muss ich das mit JS realisieren? Dachte eher an CSS - ein- und ausblenden, irgendwie...
 
sry verschrieben beim div-style. richtig:
Code: 
<div id="divFullSize" style="visibility: hidden">
Das onmouseover/onmouseout ersetzt hover. soweit ich weiß kann man einen solchen effekt nicht mit hover erzeugen.
aber ich lasse mich da gern eines besseren belehren ;)
 
Ich glaub wir reden aneinander vorbei.
Es funzt irgendwie auch noch nicht. Das Bild ist immer noch sofort da, wenn ich die Seite aufrufe...das soll so NICHT sein.
Ich will das Bild dann auch nicht als Background definieren - es soll einfach nur in einem Div erscheinen, das ich platzieren kann, wo ich will...als normales image...
 
der background war auch nur ein bsp.
ist das bild im div von anfang an zu sehen, oder wegen dem img?
das habe ich nur als bsp eingefügt. mit einem link und bild als bild in ein div sieht es dann so aus:
js
PHP: 
<script type="text/JavaScript"> 
function showFullSize() { 
  document.getElementById('divFullSize').style.visibility="visible"; 
  document.getElementById('imgFullSize').src="xyz_gross.jpg"; 
} 
function hideFullSize() { 
  myDiv.style.visibility="hidden"; 
} 
</script>

html:
Code: 
<a href="#" onmouseover="showFullSize()" onmouseout="hideFullSize()">bild anzeigen</a>
<div id="divFullSize" style="visibility: hidden;">
  <img src="" id="imgFullSize" />
</div>
 
Das ist eine Möglichkeit, es nur mit CSS zu machen. Die Höhe der Grafik musst Du angeben. Und mit den Einheiten hinter der URL legst Du die Position fest. Getestet in FF, IE7, IE6 und Opera.

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<title>CSS hover</title> 
<style type="text/css">
.box {   
   margin-left:300px;
   margin-top:300px;   
}
#bild a,#bild a:visited {
      display:block;    
      }
#bild a:hover {
   background: url(xxx.jpg) no-repeat 500px 10px;
   height:50px;  
   }
</style> 
</head> 
<body>  
<div id="bild">
<div class="box"><a href="">hier</a> </div> 
</div>
</body> 
</html>
 
Müsste es nicht einfach per js mit einem onmouseover link unter Angabe des Ziel div's zu realisieren sein? Man kann sich doch vorher überlegen wo das Bild erscheinen soll und den Platz entsprechend festlegen.

Code: 
<a href="#" onmouseover="document.bild1.src='img/bildname.jpg';">linkname</a>

Das gewünschte Ziel-div mit einem Ausgangsbild oder blanco-Bild vorbelegen welches name="bild1" bekommt und bei hover des links wird dann das jeweilige andere Bild angezeigt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben