Hallo!
Vielleicht ist hier jemand der sich damit auskennt, ich versuche hier grade vergeblich folgenden Effekt zu erreichen:
ich möchte einen klassischen roll-over effekt bei einem verlinkten bild einbauen..jedoch soll das bild nicht ausgetauscht werden, sondern ein anderes (transparentes .gif) soll ÜBER das bild gelegt werden, ohne daß das untere verschwindet..hab auch schon gegoogled, aber irgendwie nur die background-geschichte gefunden..
ich würde es auch so machen. das eigentliche bild im background, im vordergrund ständig ein transparentes pixelgif und das dan gegen denn roll-over austauschen.
hmja...aber WIE? :-)
SCRIPT
<script>
function tausch() {
if (document.images)
document.grafik.src = 'bild_over.gif';
}
function zurueck() {
if (document.images)
document.grafik.src = 'bild.gif';
}
</script>
CSS
#bild {
background: url(bild.jpg);
}
HTML
<div id="bild"><a href="#" onmouseover ="tausch()" onmouseout ="zurueck()"><img src="bild.gif" name="grafik" ></a></div>
Oder geht auch mit Mootools wie hier:
http://forum.designmadeingermany.de/2858/
Ganz unten. Nur eben dann dem vorher unsichtbaren Bild eine Class mit visible=true und opacity=1 hinzufuegen.
danke herr bredl!
aber wie kann ich jetzt das alte bild stehenlassen?`also die sollen ja eben nicht ausgetauscht werden..ich will über das erste bild bei mouseover ein transparentes gif drüberblenden..das muss doch gehen..
dann geht da halt nochmal ein div drum mit hintergrundbild
:l
sag mir noch, warum du es nicht austauschen willst. wegen dem nachladen? oder soll es tatsächlich "rüber-rollen", z.b. von oben nach unten?
[DIV class='bilder' id='bild'][A class='gifmo'][/A][/DIV]
DIV:
Hintergrund -> Dein Bild
A:
Bei "hover" transparentes GIF anzeigen, ansonsten negativer Wert fürs Background-Image
Also ganz ohne JavaScript ;-)
----
.bilder {
width: 150px;
height: 150px;
}
#bild {
background: #fff url(img/pfad/hintergrund.jpg) 0 0 no-repeat;
}
a.gifmo {
display: block;
width: 150px;
height: 150px;
background: #fff url(img/pfad/hover.gif) 0 -150px no-repeat;
}
a.gifmo:hover {
background-position: 0 0;
}
und warum muss man dazu ein zweites bild nehmen? geht doch alles in einem. das ist sogar noch viel besser, weil das hoverbild nicht zusätzlich geladen werden muss, sondern schon da ist :-)
davon ab reicht auch nur verschieben mit nem positiven oder negativen wert. wozu ein transparentes.gif, n halbtransparents png würde sinn machen. aber gif? hä? klärt ma uff mädels.
- Das Hover-Bild wird nur einmal geladen, egal wie oft du es benutzt
- Das Original-Bild muß nicht verändert werden
- PNG-Transparenz wird im Internet Explorer < 7 nicht unterstützt
- Die CSS-Variante ist Browserübergreifend und auch ohne JavaScript möglich
- Ohne GIF nur mit einem Bild + Hover-Verschieben bedeutet das die doppelte Bildgröße
...
Soll aber jeder so machen wie er es gerne möchte. Ich schreibe bestimmt nix vor.
äh ja...danke an alle...also das problem ist, daß ich mich nur wenig auskenne und mit php und css kämpfe...die bilder werden aus einem verzeichnis automatisch geladen und dargestellt,daß habe ich schon geschafft.. und jetzt versuche ich das ganze etwas nach meinen vorstellungen zu verändern..
ich kann leider keinen pfad angeben, da der effekt ja bei jedem bild automatisch dargestellt werden soll..ich muss das irgendwie mit der variable angeben..aber wie gesagt..die hälfte eurer hilfe löst bei mir nur "bahnhof" aus.. ;-) aber ich versuchs mal!
nächste station: hauptbahnhof.
milde ausgedrückt: das problem scheint wo anders zu liegen. bin raus :-)
ps.: sorry Sinoy Gaanuba. Meinen wohl beide das gleiche, wollte Dich nicht anfahren.
lieben gruß,
lukas
Seitentitel: CSS Roll-Over Hilfe