Seite 1 von 2
mouseover css
Verfasst: 21.10.2006, 21:43
von fairsand
Ich suche mir schon die ganze Zeit einen Wolf.
Ich möchte im Layout wenn die Maus über einen Link Bild1 geht dieses Bild austauschen gegen Bild2.
Wie kann ich das mit Css am einfachsten machen? (valid)
Verfasst:
von
Hochwertiger Linkaufbau bei ABAKUS:
- Google-konformer Linkaufbau
- nachhaltiges Ranking
- Linkbuilding Angebote zu fairen Preisen
- internationale Backlinks
Wir bieten
Beratung und
Umsetzung.
Jetzt anfragen:
0511 / 300325-0
Verfasst: 21.10.2006, 22:00
von Wirths Media
Würde sagen über a:hover background:url()
Gruß
Daniel
Verfasst: 21.10.2006, 23:11
von fairsand
Ich glaube ich hasse css... oder es ist schon zu spät für mich......
<style type="text/css">
#rollovermenu a {background: url("images/bild1.png"); width: 235px; height: 34px; }
#rollovermenu a:hover {background-image: url("images/bild1a.png"); width: 235px; height: 34px;}
#rollovermenu a:active {background-image: url("images/bild1.png"); width: 235px; height: 34px;}
</style>
<div id="rollovermenu"><a href="index.php"> </a></div>
Bilder sind da, werden aber nicht gezeigt?
Verfasst: 21.10.2006, 23:19
von depp ich
Um css zu hassen ist es nie zu spät.
Verfasst: 21.10.2006, 23:24
von Wirths Media
funktioniert doch so...
vielleicht liegt es an width: 235px; height: 34px;, hat bei mir auch nicht das ganze Bild angezeigt, nur den oberen (weißen) bereich.
Verfasst: 21.10.2006, 23:25
von fairsand
So der Code geht jetzt im IE:
#rollovermenu a {background: url("images/bild1.png"); width: 235px; height: 34px;}
#rollovermenu a:hover {background-image: url("images/bild1a.png"); width: 235px; height: 34px;}
#rollovermenu a:active {background-image: url("images/bild1.png"); width: 235px; height: 34px;}
<div id="rollovermenu"><a href="index.php"><img src="images/bild1a.gif" border="0" height="34" width="235" alt="Letzte Seite" /></a></div>
Wenn mir jetzt noch einer sagt wie ich das im firefox sichtbar machen kann ? Der will das so nicht.

Verfasst: 22.10.2006, 21:14
von Kralle
Also mein Stand der Dinge ist, daß das momentan nur über eine JavaScript-Lösung browsersicher ist. Auch der IE hatte damit einst Probleme, wenn ich mich recht entsinne.
Verfasst: 22.10.2006, 21:54
von fairsand
ich denke auch....

Habe auf jeden Fall mal nix gefunden.....
Muss dann ohne gehen.

Verfasst: 22.10.2006, 22:28
von seikodäd
mit css allein kann man das, glaube ich, gar nicht zuverlässig lösen. so habe ich es mal mit javascript gemacht, funktioniert auch mit älteren browsern:
Code: Alles auswählen
<style type="text/css">
div.verweis { ... }
div.verweis_rollover { ... }
</style>
...
<script type="text/javascript">
function switchBg(btnRef, isMouseOver) {
btnRef.className = isMouseOver ? "verweis" : "verweis_rollover";
}
</script>
...
<div onclick="document.location.href='abc'" onmouseover="switchBg(this,false)" onmouseout="switchBg(this,true)">
<a href="abc">Linktext</a>
</div>
Verfasst: 23.10.2006, 10:20
von abrek
Probier mal das mit „hidden layers“ zu lösen.
Verfasst: 23.10.2006, 18:35
von fairsand
So, Kinders
ich hab die Page html valid und css valid!!!!!!!
Glaube es selbst kaum;-)
Hab nur noch ein kleines Problem:
body { margin-top: 5px; text-align:center;}
Im Internet Exploder ist das Design mittig zentriert, im Firefox nicht?
Verfasst: 23.10.2006, 18:50
von luigip
Mach nen div container um den zu zentrierenden content.
In die css-Datei:
#content {margin:1em auto 0px; ...}
Verfasst: 23.10.2006, 19:05
von kaisen
mal mit display:block probiert?
Verfasst: 23.10.2006, 19:32
von SebastianKTN
Das mit dem zentrieren ist ne Sache für sich.
https://www.css4you.de/wslayout1/ex0003.html
Verfasst: 23.10.2006, 19:43
von fairsand
Je länger ich mir die Sache anschaue desto besser gefällt es mir im Firefox linksbündig....

Macht Ihr eure Pages immer mittig?
Wie gefällt euch das Layout bisher?
pm-fairsand.de/Projekt/index.php
Mal sehen ob ich in den letzten 10 Monaten hier wenigsten ein bischen etwas gelernt habe.
Oben in der Leiste die Texte sind dynamisch, sowie auch die MetaTags.
Die internen Links funktionieren allerdings noch nicht.