Willkommen in der Webstatt Zum Webstatt Blog und Stories
trefixxx am 06.07.07 17:55

Hallo zusammen,

ich habe folgende situation:

<div id="bild">
<img src="bild1.jpg">
</div>

<a href="link1">link1</a>
<a href="link2">link2</a>
<a href="link3">link3</a>


Sobald ich mit der Maus über Link1 drüberfahre, soll bild1.jpg mit link1.jpg ersetzt werden - mit einem blendeffekt ähnlich wie bei den javascript-slideshows.

Wie kann ich so etwas machen?
Vorzüglich würde ich einen codeschnippsel nehmen, ansonsten gerne eine art schritt-für-schritt anleitung, wie ich das machen kann - evtl. vllt. tutorials?!

Vielen Dank!

netcup.de Warum gibt es hier Werbung?
Wasili am 06.07.07 18:05

Spontan einfallen würde mir:
- Neues Bild drüber legen mit voller Transparenz
- Altes Bild transparenter werden lassen, neues Bild weniger transperant werden lassen
- Fertig

Geht leider nicht in allen Browsern =/

Rene Rene am 06.07.07 19:40

Ein Workaround für IE und Mozilla für diese Eigenschaften:
filter:Alpha()
-moz-opacity

Ich selbst hab keine Erfahrungen damit. Ich hab auch keine Ahnung was mit Opera ist :)

...du kannst auch warten, bis css3 vollständig fertig ist. Kann aber dauern ^^

Wasili am 06.07.07 21:15

Eventuell unterstützen neuere Operas "opacity".

Rene Rene am 07.07.07 02:50

Ich hab ma was gebastelt. Ist aber noch recht optimierungsbedürftig. Funktioniert aber bereits für IE und Firefox. Opera zickt noch, wie zu erwarten war.
Ich poste ma das Script hier rein und hänge eine Demo an mit Beispielbildern.
Hätte ich gewusst, dass das so lang würd, hätt ich damit garnicht erst angefangen :D

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>



<script type="text/javascript">

/* ------------------ WEBSTATT.ORG ----------------------- */

var Starterbild = "Bild1" //Name vom Starterbild eintragen!




var check = 0; //Verhindert Mehrfachladen...


// Browser-Check //
function init(BildNr) {
if(navigator.appName=="Netscape") {
Bumper = new MozillaBumper(BildNr); return; }
if(navigator.appName=="Microsoft Internet Explorer") {
Bumper = new IEBumper(BildNr); return; }
}

// .... -> Mozilla Init //
function MozillaBumper(BildNr) {
if(MozSlider.BildName=='') {
MozSlider.BildName=Starterbild; }
if((BildNr==MozSlider.BildName) || (check==1)) { return; }
check=1;
MozSlider.BildName2=BildNr;
document.images[BildNr].style.zIndex=0;
MozSlider.HideWert=1.0;
MozSlider.ShowWert=0;
MozSlider.MozHide();
MozSlider.MozShow();
}

// .... -> IE Init //
function IEBumper(BildNr) {
if(IESlider.BildName=='') {
IESlider.BildName=Starterbild; }
if((BildNr==IESlider.BildName) || (check==1)) { return; }
check=1;
IESlider.BildName2=BildNr;
document.images[BildNr].style.zIndex=0;
IESlider.HideWert=100;
IESlider.ShowWert=0;
IESlider.IEHide();
IESlider.IEShow();

}


// Script für Mozilla //
MozSlider = {

HideWert : 0, ShowWert : 0,
BildName : '', BildName2 : '',

// Verstecke 1. Bild //
MozHide : function() {
MozSlider.HideWert-=0.03;
if(MozSlider.roundedMzWert(MozSlider.HideWert)>0) {
document.images[MozSlider.BildName].style.MozOpacity=MozSlider.roundedMzWert(MozSlider.HideWert);
setTimeout("MozSlider.MozHide()", 100); }
else {
document.images[MozSlider.BildName].style.MozOpacity=0;
document.images[MozSlider.BildName].style.zIndex=-1
}
},

// Zeige 2. Bild //
MozShow : function() {
MozSlider.ShowWert+=0.03;
if(MozSlider.roundedMzWert(MozSlider.ShowWert)<1) {
document.images[MozSlider.BildName2].style.MozOpacity=MozSlider.roundedMzWert(MozSlider.ShowWert);
setTimeout("MozSlider.MozShow()", 100); }
else {
document.images[MozSlider.BildName2].style.MozOpacity=1;
document.images[MozSlider.BildName2].style.zIndex=1;
MozSlider.BildName=MozSlider.BildName2;
check=0;
}
},

// Del Rundungsfehler //
roundedMzWert : function(Wert) {
Wert=Wert.toString();
Wert=Wert.substr(0,4);
return Wert;
}

},


// Script für IE //
IESlider = {
HideWert : 100, ShowWert: 0,
BildName : '', BildName2 : '',

// Verstecke 1. Bild //
IEHide : function() {
IESlider.HideWert-=10;
if(IESlider.HideWert>0) {
document.images[IESlider.BildName].style.filter="Alpha(opacity="+IESlider.HideWert+")";
setTimeout("IESlider.IEHide()", 100); }
else {

document.images[IESlider.BildName].style.filter="Alpha(opacity=0)";
document.images[IESlider.BildName].style.zIndex=-1
}


},

// Zeige 2. Bild //
IEShow : function() {
IESlider.ShowWert+=5;
if(IESlider.ShowWert<100) {
document.images[IESlider.BildName2].style.filter="Alpha(opacity="+IESlider.ShowWert+")";
setTimeout("IESlider.IEShow()", 100); }
else {
document.images[IESlider.BildName2].style.filter="Alpha(opacity="+100+")";
document.images[IESlider.BildName2].style.zIndex=1;
IESlider.BildName=IESlider.BildName2;
check=0;
}
}

}

</script>


</head>
<body>



<img name="Bild1" src="bild1.gif" style="z-index:1; position:absolute; left:10px; top: 10px;">
<img name="Bild2" src="bild2.gif" style="z-index:0; position:absolute; left:10px; top: 10px;">
<img name="Bild3" src="bild3.gif" style="z-index:-1; position:absolute; left:10px; top: 10px;">

<div id="Links" style="position:absolute; top: 400px;">
<a href="javascript:init('Bild1')">Link 1 </a><br>
<a href="javascript:init('Bild2')">Link 2 </a><br>
<a href="javascript:init('Bild3')">Link 3 </a><br>
<br>
</div>
</body>
</html>


Gruß
René

trefixxx am 07.07.07 11:17

jaaaa.... mooin! Vielen Vielen Vielen Dank!
Ich probier's direkt mal aus =)

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt