Opacity, fade, mouseover. (Leter ikke etter det vanlige scriptet)

chny · 7. oktober 2008

Ja jeg vet det eksisterer 1000 sciprt som gjør dette ute på nettet.

Det jeg er er ute etter er et script som fader ALLE andre bilder enn de du holder musepekren over.

Jeg har en tabell med bilder bortover på og jeg ønsker at når jeg holder musa over feks bilde 3 skal bilde 1,2,4,5,6 fade ut til 50% opacity.

Noen som har greie på hvordan jeg får til det? Finner bare script som gjør det motsatte eller en noe annet, og jeg har ikke kompetanse til å skjønne hvordan jeg kan scripte det om.

Jonas · 9. oktober 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

	<title>Test</title>

</head>

<body>

	<p>

		<img onmousemove="java script: hoverImage(this, 1);" src="http://img.gfx.no/528/528270/postgresql_logo_300_200.60x40!.jpg" />
		<img onmousemove="java script: hoverImage(this, 2);" src="http://img.gfx.no/528/528270/postgresql_logo_300_200.60x40!.jpg" />
		<img onmousemove="java script: hoverImage(this, 3);" src="http://img.gfx.no/528/528270/postgresql_logo_300_200.60x40!.jpg" />
		<img onmousemove="java script: hoverImage(this, 4);" src="http://img.gfx.no/528/528270/postgresql_logo_300_200.60x40!.jpg" />
		<img onmousemove="java script: hoverImage(this, 5);" src="http://img.gfx.no/528/528270/postgresql_logo_300_200.60x40!.jpg" />
		<img onmousemove="java script: hoverImage(this, 6);" src="http://img.gfx.no/528/528270/postgresql_logo_300_200.60x40!.jpg" />
		<img onmousemove="java script: hoverImage(this, 7);" src="http://img.gfx.no/528/528270/postgresql_logo_300_200.60x40!.jpg" />

	</p>

	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
		var lastId = 0;
		function hoverImage ( refImage, id ) {
			if ( lastId != id ) {
				lastId = id;
				$('img').not(refImage).animate(
					{
						opacity: 0.3
					},
					200
				);
				$(refImage).animate(
					{
						opacity: 1
					},
					200
				);
			}
		}
	</script>

</body>

</html>

chny · 12. oktober 2008

Hm.. har testa det i både firefox og safari, men det ser ikke ut til å virke. Veldig synd.. Tusen takk for hjelpa forresten!

Jonas · 12. oktober 2008

Jeg har selv testet det i IE, Opera og FF (2.0.0.17 riktignok) og det funker fint.

cbastus · 17. november 2008

Bruk scriptet du har for fadingen. Kjør det på alle bilder du ønsker fadet ved hjelp av en array eller noe slikt, unntatt bildet du er på:

(Saudokode)

function fade (bilde){

var bilder = alle bilder;

for(i=0;i<bilder.length;i++);

if(bilder != bilde)

bilde.fade;

}

<img onmouseover="fade(this)"/>

cbastus · 18. november 2008

Beklager, så ikke nota om at du ikke hadde tilstrekkelig kunnskap til å gjøre det selv.

I utgangspunktet tror jeg ikke det finnes ferdiglagde script for det du ønsker, det de ferdiglagde scriptene gjør er i grunn bare å forandre et element du gir dem, og som oftest er dette det elementet du står på.

Løsningen blir derfor som nevnt over å bruke samme script, men å kjøre de på alle andre objekter enn det du vil endre. Siden løsningen på dette vil variere voldsomt utifra hvordan du har lagt opp din kode er det problematisk å gi en god løsning uten å legge opp til alt du trenger. En rask skisse av en måte å løse det på er som følger:

<html>
<head>
<style>
.fade-50{ opacity:0.5; filter:alpha(opacity = 50); }
</style>
<script>
function fade(opac, obj){
var sibl = obj.parentNode.getElementsByTagName('img');
for(i=0;i<sibl.length;i++){
if(sibl[i]!= obj)
	sibl[i].className = 'fade-'+opac;
}
}
</script>
</head>

<body>
<img onmouseover="fade(50,this)" onmouseout="fade(100,this)" src=""/>
<img onmouseover="fade(50,this)" onmouseout="fade(100,this)" src=""/>
<img onmouseover="fade(50,this)" onmouseout="fade(100,this)" src=""/>
</body>
</html>

For å skjønne mer av eksempelet over anbefaler jeg at du leser om parentNode på MDC og opacity i CSS, eventuelt starter på w3schools.com og går gjennom opplæringen der.

Endret 18. november 2008 av cbastus

Logg inn

Opacity, fade, mouseover. (Leter ikke etter det vanlige scriptet)

Anbefalte innlegg

chny

Lenke til kommentar

Videoannonse

Jonas

Lenke til kommentar

chny

Lenke til kommentar

Jonas

Lenke til kommentar

cbastus

Lenke til kommentar

cbastus

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer