Bild wenn man mit der Maus über einen Link fährt...

[BDG]

Also ich wollte fragen wie man das macht das da ein Bild erscheint wenn man mit der Maus darüberfährt ... Also ich hab mal was von imagfocus gehört aber sonst nichts ... Ich hoffe ihr könnt mir ein code beispiel geben mit einem verlinktem Bild und dem sein "image-focus"

 

[BDG]

PS: hab schon was von onmouseover gehört aber das hab ich nicht so wirklich verstanden und außerdem war der code viel zu lang und wenn ich das für jedes Bild machen soll ... mit 30 oder mehr bilder ? gibt es da noch eine Alternative in php oder html ?

 

[Cheffchen]

Hallo,
such mal nach Tooltip entweder javascript oder css dazu.
Javascript ist meistens mit schicken effekten wie einblenden oder so, css ist meist weniger code aber halt nur Anzeigen.

Cheffchen

 

[prm]

CSS Popup, CSS Infofenster

 

[BDG]

Also wie es bei diesem link zu sehen ist will ichs aber nicht haben : CSS Popup, CSS-Info-Fenster, Tooltip
sondern ein button also ein verlinktes Bild mit einem anderen Bild das kommt wenn man darüberfährt. Also wenn ihr windows habt und ins starmenü habt und mit der maus darüberfährt leuchtet das ja auch auf ... und sowas will ich halt auch mit zwei Bildern machen. Bei flash geht das irgendwie mit rollOver(); aber ich weiß nicht wie das in html oder php geht ... wenns sein muss halt auch java script

 

[Elroy]

Hallo.

Du suchst also einen einfachen hover effekt?

CSS4You - hover

Gruss
Elroy

 

[BDG]

ohh hmm das hat mir witer geholfen ... heist das ich könnte jetzt so machen :

#div {
a:hover{image:url="trulala.jpg";}
}

geht das so ?

 

[Cheffchen]

Hallo,
nee wo hast das her, nicht aus den Links eher so:
Ungetestet
im head

<style>
.bild1 span {
display: none;}
.bild1:link, .bild1:visited {
display: block;    
width: 200px;    
height: 100px;    
background-image:url(bild1normal.jpg);}
 
.bild1:hover, .bild1:active, .klasse:focus {    
background-image:url(bild1hover.jpg);}
</style>

im Body

[COLOR=#008000]<a href=[COLOR=#0000ff]""[/COLOR] class=[COLOR=#0000ff]"bild1"[/COLOR]>[/COLOR][COLOR=#000080]<span>[/COLOR]Alternativtext[COLOR=#000080]</span>[/COLOR][COLOR=#008000]</a>[/COLOR]
oder so
[COLOR=#008000]<div class=[COLOR=#0000ff]"bild1"[/COLOR]>[/COLOR][COLOR=#000080]<span>[/COLOR]Alternativtext[COLOR=#000080]</span>[/COLOR][COLOR=#008000]</div>[/COLOR]

Cheffchen

 

[BDG]

aha ... jetzt gehts :)
hier die css:

    .one {
    width:150px;
    height:41px;
    position:absolute;
    top:17px;
    left:16px;
    }
    .one span {
     display: none;}
.one:link, .one:visited {
display: block;        
background-image:url(startpunkt1.jpg);}
 
.one:hover, .one:active, .klasse:focus {    
background-image:url(startpunkt1-foc.jpg);}

und hier html :

<a href="http://google.com" class="one" ></a>

THX