Fragen und Antworten » Weicher Bild- Hover effekt???

15.08.2009 22:19

hondafreak81
#1 Weicher Bild- Hover effekt???

ho

Hi in meinem Forum

hondayoungtimer.de

habe ich oben mein Bannerbild.
Wenn man drüber fährt gehen die Lichter an.
Ist es möglich das das auch weich geschieht und weich ausfadet wenn man ihn mit der maus verlässt???

MfffffG

Antworten

Beitrag melden

#2

16.08.2009 02:41 (zuletzt bearbeitet: 16.08.2009 02:45)

Yurichan
#2 RE: Weicher Bild- Hover effekt???

Yurichan

Hm.. bei mir gehen (als Gast) weder mit dem IE8 noch mit Mozilla Firefox die Lichter an :( ?
..Nur mal so nebenbei gesagt...

Edit: lol? Habe mir den Quelltext anzeigen lassen und siehe da: es geht.. Tut mir Leid für den sinnfreien Beitrag..

Hm.. leider kann ich Ihnen mit dem "weichen Hover-Bild Effekt" nicht helfen.. ich schau mal aber bei google vorbei und melde mich wieder wenn ich was gefunde habe.. Bin erst Anfänger in Sachen HTML etc..

Bestimmt sind da die Supporter aber wieder schneller

Antworten

Beitrag melden

#3

16.08.2009 19:48 (zuletzt bearbeitet: 16.08.2009 19:59)

Yurichan
#3 RE: Weicher Bild- Hover effekt???

Yurichan

Soo.. nach unendlichlanger Suche, habe ich schließlich etwas gefunden, was Ihr Problem hoffentlich löst..

Hier der Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<script type="text/javascript">
function BilderOverOut(i,o) {
	if(!i.id)	{
		i.id="BilderOverOutImg"+(++BilderOverOut.id);
	}
	if(i.filters)	{
		i.filters[0].apply();
		i.style.backgroundPosition=o?"-"+parseInt(i.parentNode.style.width)+"px 0":"0 0";
		i.filters[0].play();
	} else {
		if(o) {
			i.style.opacity = 1;
			i.style.zIndex = 2;
			i.clone = i.cloneNode(true);
			i.clone.id = "BilderOverOutImg"+(++BilderOverOut.id);
			delete i.clone.onmouseover;
			delete i.clone.onmouseout;
			i.clone.style.zIndex = 1;
			i.clone.style.left = 0;
			i.clone.style.top =  0;
			i.clone.style.backgroundPosition="-"+parseInt(i.parentNode.style.width)+"px 0";
			i.parentNode.appendChild(i.clone);
			i.timer = setTimeout("TimerOverOut('"+i.id+"',-0.1)",10);	
		} else {
			clearTimeout(i.timer);
			i.timer = setTimeout("TimerOverOut('"+i.id+"',0.1)",50);
		}
	}
}
BilderOverOut.id = 0;

function TimerOverOut(id,inc) {
	var i = document.getElementById(id);
	var opac = parseFloat(i.style.opacity);
	if((opac>0&&inc<0)||(opac<1&&inc>0)) {
		i.style.opacity = opac+=inc;
		i.timer = setTimeout("TimerOverOut('"+id+"',"+inc+")",50);
	} else if(opac>=1&&inc>0) {
		try {
			clearTimeout(i.timer);
			i.parentNode.removeChild(i.clone);
			i.clone = null;
			i.style.opacity = 1;
		}	catch(ex){}
	}
}
</script>

<style type="text/css">
.BilderRollOver {
	display:block; filter:progid:DXImageTransform.Microsoft.Fade(Duration=0.2); left:0px; float:left; width:100%; height:100%; background-repeat:no-repeat; position:absolute; opacity:1;
}
</style>

<a onmouseover="BilderOverOut(this.firstChild,1)" title="goto Home" style="display:block; float:left; width:960px; cursor:pointer; position:relative; height:206px;" onmouseout="BilderOverOut(this.firstChild,0)" href="http://www.hondayoungtimer.de/"><span class="BilderRollOver" style="background-image:url(http://img4.imageshack.us/img4/6580/ban2fkopie.png)"></span></a>

Am besten in den <head> Bereich einfügen und lieber nichts ändern.. Habe das Bild nämlich schon eingebaut.
Bei Bedarf können Sie die Verzögerung einstellen.

LG Yurichan

Antworten

Beitrag melden

#4

16.08.2009 20:24

hondafreak81
#4 RE: Weicher Bild- Hover effekt???

ho

hondafreak81

Danke an sich ist es schon perfekt.

ich hab es in meinem testforum eingebaut.

leider trotz center tag ist es nicht zentriert, und das blaue feld wird nach oben gezogen das sollte so klein bleiben wie es ist.....

http://www.kleinervolvo.de