Willkommen in der Webstatt
User-1 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 xyz-48k!

netcup.de Warum gibt es hier Werbung?
User-2 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 =/

User-3 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 ^^

User-2 am 06.07.07 21:15

Eventuell unterstützen neuere Operas "opacity".

User-3 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é

User-1 am 07.07.07 11:17

jaaaa.... mooin! Vielen Vielen Vielen xyz-48k!
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