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">&nbsp;</a></div>

Bilder sind da, werden aber nicht gezeigt?

Verfasst:
von

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 &#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>

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.