ABAKUS

Verfasst: **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)

Verfasst: **21.10.2006, 22:00**

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

Gruß
Daniel

Verfasst: **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?

Verfasst: **21.10.2006, 23:19**

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

Verfasst: **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.

Verfasst: **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.

Verfasst: **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.

Verfasst: **22.10.2006, 21:54**

ich denke auch....

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

Verfasst: **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>

Verfasst: **23.10.2006, 10:20**

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

Verfasst: **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?

Verfasst: **23.10.2006, 18:50**

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

Verfasst: **23.10.2006, 19:05**

mal mit display:block probiert?

Verfasst: **23.10.2006, 19:32**

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

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

Verfasst: **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.

ABAKUS

mouseover css

mouseover css