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

hover bei images

S

Schneider

New member
hi @ all
ich habe wieder mal ne frage :)
ich habe ein Bild als Button, jetzt würde ich gerne einen Roll-Over Effekt machen, allerdings nicht mit einem zweiten bild sondern mit CSS

Im Prinzip will ich nur, dass das Bild einen Rahmen bekommt wenn ich darüber fahre!

Ist es mit CSS realisierbar?? Bisher habe ich nicht wirklich was bei Google gefunden!!!


Für euere Hilfe wäre ich sehr dankbar

greetz
 
Das kann der Internet Explorer auch erst ab Version 7

:hover funktioniert bei vorherigen Versionen nicht auf alle Elemente

Wenn Du ne Listennavigation machst, dann kannst Du den border über a:link und den geänderten border über a:hover zuordnen.

Wie sieht denn deine Navi jetzt aus?
 
ein schlauer schrieb:
Wer ist er?
Zum Vergrößern anklicken....

entschuldige gemeint war Firefox 1.5.0.1 und Internet Explorer 6

so sieht mein Code aus:

Code: 
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
button.menu {width:30; height:30; border-width:1;}
button.large {width:31; height:31; border-width:0; background-color:transparent;}
button.medium {width:24; height:30; border-width:0; background-color:transparent;}
button.small {width:22; height:16; border-width:1;}

-->
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><img src='spacer.gif' width='4' height='1' border='0' alt=''></td>
        <td><button class="large" onMouseOver="imgdel.src='delete_over.gif';" onMouseout="imgdel.src='delete.gif'" onClick="javascript:fnDelete()" title="löschen"><img name="imgdel" src="delete.gif" border="0" alt="löschen"></button></td>
        <td><img src='spacer.gif' width='10' height='1' border='0' title=''></td>
        <td><button class="large" onMouseOver="imgcopy.src='copy_over.gif';" onMouseout="imgcopy.src='copy.gif'" onClick="javascript:fnCutCopy('copy')" title="kopieren"><img name="imgcopy" src="copy.gif" border="0" alt="kopieren"></button></td>
        <td><img src='spacer.gif' width='10' height='1' border='0' alt=''></td>
        <td><button class="large" onMouseOver="imgdownload.src='download_over.gif';" onMouseout="imgdownload.src='download.gif'" onClick="javascript:openQualityWin()" title="Ausgewählte Objekte als ZIP Datei herunter laden"><img name="imgdownload" src="download.gif" border="0" alt="Ausgewählte Objekte als ZIP Datei runderladen"></button></td>
        <td><img src='spacer.gif' width='10' height='1' border='0' alt=''></td>
        <td><img src='spacer.gif' width='10' height='1' border='0' alt=''></td>
        <td><img src='spacer.gif' width='10' height='1' border='0' alt=''></td>
        <td><img src='spacer.gif' width='20' height='1' border='0' alt=''></td>
        <td><img src='spacer.gif' width='20' height='1' border='0' alt=''></td>
        <td width=100% align=right valign=bottom><font size=1></font></td>
    </tr>
</body>
</html>

und ich habe die Dateien noch angehängt!
 

Anhänge

  • test.zip
    7,8 KB · Aufrufe: 1
Moin!

Nimm mal was in der Art als Basis:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Beispiel</title>
<style type="text/css">
<!--
.rahmen img{
border:2px solid white;
}
.rahmen:hover img{
border:2px solid blue;
}
-->
</style>
<!--[if IE]>
<style type="text/css">
<!--
.rahmen img,.rahmen:hover img{
border:0px;
}
.rahmen{
position:relative;
border:2px solid white;
}
.rahmen:hover{
border:2px solid blue;
}
-->
</style>
<![endif]-->
</head>
<body>
<a href="" class="rahmen"><img src="1.gif" alt=""></a>
<a href="" class="rahmen"><img src="2.gif" alt=""></a>
<a href="" class="rahmen"><img src="3.gif" alt=""></a>
</body>
</html>
Und wenn Du anstelle der buttons anchors nimmst, kannst Du auch den Bildwechsel ohne Javascript hinbekommen...

Ahoi - Pit
 
Mein Beispiel funzt auch in FF.

Anchors sind <a ...>blah</a> - Tags

Ahoi - Pit
 
achso vielen Dank für die Info

hm eigenlich habe ich dein Script kopiert und mit meinen Bildern ersetzt geändert habe ich nichts

danke nochmals!!!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben