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

Hovereffect mit Bild

V

vatrixxx

Neues Mitglied
Hallo leute ich bin zufällig auf dieses Forum durch google gestoßen ^^
und hab da auch gleich eine passende Frage
unzwar möchte ich ein bestimmtes Wort mit ein hovereffect versehen z.B.

Beispiel

so wenn man jetz mit der Maus über Beispiel fährt sollte ein Bild erscheinen ich hab das auf einigen Webseiten gesehen aber selber nie hingekriegt es selber zu machen
könnte mir da wer helfen?
 
Geht vom Prinzip her wie hier erklärt: CSS Popup, CSS Infofenster
Du musst lediglich a.info:hover span noch eine Hintergrundgrafik und einen Höhenwert zuweisen, z.B.
Code: 
background-image: url(deinbild.jpg);
height: 200px;
 
ja danke schon ma bloß jetz kommt die frage
das das bei mir irgendwie nich geht wie soll das denn ungefähr aussehen... so?

Code: 
<style type="text/css">
<a.info
{
position:relative;
z-index:1;
background-color:#ff0;
color:#2D006B;
text-decoration:none;
}

a.info:hover
{
z-index:2;
background-color:#C0FF3E;
}

a.info span
{
display: none;
}

a.info:hover span
{
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;
height: 200px;
border:1px solid #12127D;
background-color:#fc0;
background-image: www.test.de/test.jpg ;
color:#000;
text-align: center;
padding: 5px;
font-size: 0.8em;
}>
</style>
 
da ist ein umschließendes pärchen krokodilsklammern (<>) zu viel und noch drei kleine fehlerchen drin.
jag' das mal durch den CSS-validator und korrigiers, dann sollte alles funktionieren.

Nils aka XraYSoLo
 
Code: 
<style type="text/css">
a.info
{
position:relative;
z-index:1;
background-color:#ff0;
color:#2D006B;
text-decoration:none;
}

a.info:hover
{
z-index:2;
background-color:#C0FF3E;
}

a.info span
{
display: none;
}

a.info:hover span
{
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;
height: 200px;
border:1px solid #12127D;
background-color:#fc0;
background-image: /test.jpg ;
color:#000;
text-align: center;
padding: 5px;
font-size: 0.8em;
}
</style>

dann siehts so aus aber geht immernoch nicht...
da is jetz nurnoch 1 fehler drinne und das is weil er das /test.jpg nicht erkennen kann weil auf der homepage das test.jpg nicht gibt...
 
mit javascript würde es auch gehen. erstmal das script:
Code: 
<script language="JavaScript">
  function zeige(bild){
    document.getElementById("bild").innerHTML = bild;
  }

  function verberge(){
    document.getElementById("bild").innerHTML = "";
  }
</script>

dann im body bereich wenn du z.B. über ein text scrollen willst und es soll dein bild erscheinen dann machst du
Code: 
<body>
  <div OnMouseOver="javascript:zeige('[dein bild]')" OnMouseOut="verberge()">dein Text ...</div> 
<!-- OnMouseOut nur wenn du willst das das bild wieder verschwindet wenn du mit der maus vom text runtergehst -->
<div id="bild">hier wird dein bild dann erscheinen</div>
 
kein JS wenn was anderes möglich ist, damit schließt man user aus.
adressier' deine bilder mal absolut, denn mit relativen angaben beißt sich CSS manchmal.

Nils aka XraYSoLo
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben