mouseover css

Beitrag von **fairsand** » 21.10.2006, 21:43

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)

von **Anzeige von ABAKUS** »

Beitrag von **Wirths Media** » 21.10.2006, 22:00

Würde sagen über a:hover background:url()

Gruß
Daniel

Beitrag von **fairsand** » 21.10.2006, 23:11

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?

von **Anzeige von ABAKUS** »

Beitrag von **depp ich** » 21.10.2006, 23:19

Um css zu hassen ist es nie zu spät.

Beitrag von **Wirths Media** » 21.10.2006, 23:24

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.

Beitrag von **fairsand** » 21.10.2006, 23:25

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.

Beitrag von **Kralle** » 22.10.2006, 21:14

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.

Beitrag von **fairsand** » 22.10.2006, 21:54

ich denke auch....

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

Beitrag von **seikodäd** » 22.10.2006, 22:28

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 &#123; ... &#125;
  div.verweis_rollover &#123; ... &#125;
</style>

...

<script type="text/javascript">
  function switchBg&#40;btnRef, isMouseOver&#41; &#123;
    btnRef.className = isMouseOver ? "verweis" &#58; "verweis_rollover";
  &#125;
</script>

...

<div onclick="document.location.href='abc'" onmouseover="switchBg&#40;this,false&#41;" onmouseout="switchBg&#40;this,true&#41;">
  <a href="abc">Linktext</a>
</div>

Beitrag von **abrek** » 23.10.2006, 10:20

Probier mal das mit „hidden layers“ zu lösen.

Beitrag von **fairsand** » 23.10.2006, 18:35

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?

Beitrag von **luigip** » 23.10.2006, 18:50

Mach nen div container um den zu zentrierenden content.
In die css-Datei:
#content {margin:1em auto 0px; ...}

Beitrag von **kaisen** » 23.10.2006, 19:05

mal mit display:block probiert?

Beitrag von **SebastianKTN** » 23.10.2006, 19:32

Das mit dem zentrieren ist ne Sache für sich.

https://www.css4you.de/wslayout1/ex0003.html

Beitrag von **fairsand** » 23.10.2006, 19:43

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.