Får ikkje til onmouseover

dedLy_sCoRpIoN · 5. mai 2008

Holder litt på med onmouseover men får ikkje det til å funke...

Ka gjer eg feil?

Er det ein lettare måte å ordne koden på?

 
<html>
<head>
<title>Untitled-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Untitled-2) -->
<script type="text/javascript">
<!--

function newImage(arg) {
 if (document.images) {
	 rslt = new Image();
	 rslt.src = arg;
	 return rslt;
 }
}

function changeImages() {
 if (document.images && (preloadFlag == true)) {
	 for (var i=0; i<changeImages.arguments.length; i+=2) {
		 document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
	 }
 }
}

var preloadFlag = false;
function preloadImages() {
 if (document.images) {
	 site_05_over = newImage("images/site_05-over.gif");
	 site_07_over = newImage("images/site_07-over.gif");
	 site_08_over = newImage("images/site_08-over.gif");
	 preloadFlag = true;
 }
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body>

<a href="images/image-4.jpg" rel="lightbox[polar]"
			 onmouseover="changeImages('site_05', 'images/site_05-over.gif'); return true;"
			 onmouseout="changeImages('site_05', 'images/site_05.gif'); return true;"
			 onmousedown="changeImages('site_05', 'images/site_05-over.gif'); return true;"
			 onmouseup="changeImages('site_05', 'images/site_05-over.gif'); return true;">
			 <img name="site_05" src="images/site_05.gif" width="95" height="36" border="0" alt=""></a>

</body>
</html>

hishadow · 6. mai 2008

Muligens enklere hvis du bruker CSS til denne effekten sammen med divs.

#site_05:link {background: #000000 url(./images/site_05.gif) no-repeat scroll 95px 36px;}

#site_05:visited {...}

#site_05:hover {...}

#site_05:active {...}

også prøv:

<img id="site_05" name="site_05"...

Endret 6. mai 2008 av hishadow

cbastus · 8. mai 2008

Muligens enklere hvis du bruker CSS til denne effekten sammen med divs.

#site_05:link {background: #000000 url(./images/site_05.gif) no-repeat scroll 95px 36px;}

#site_05:visited {...}

#site_05:hover {...}

#site_05:active {...}

Vil bare tipse om at de fleste CSS pseudoklasser (:hover, :visited, :first-child ol.) ikke fungerer i Internett Explorer og eldre browsere for annet enn lenker (anchor). Her er en hendig liste over pseudoklassene i CSS, noen av disse vil som sagt kun fungere på A i en del browsere. Her må du bare prøve deg frem.

Om du vil ha samtlige pseudoklasser på alle elementer i IE må du benytte et script som legger til disse, og da er det ofte like greit å bruke rollover som du er i ferd med her eller som hishadow sier å bytte img tagen og bruke anchor med satt bredde samt vidde. Ulempen er igjen at bakgrunnsbilder ikke er tilgjengelig for screen readers og liknende ... Det hele blir en vurderingssak om hva som passer best for din målgruppe.

Ka gjer eg feil?

Scriptet ditt kjører forøvrig ikke fordi preloadFlag aldri blir satt til true. Du må initialisere preloadImages() et sted i koden, det holder å skrive preloadImages() som siste linje før </script>. Det er ikke anbefalt å bruke onLoad i body, bruk heller da en addEventListner. Søk på nett for mer om onLoad og addEventListner om du lurer på hva dette er.

Et hendig tips er forøvrig å sjekke løkker og if setninger med alert('denne løkken kjører') inne i hva nå enn du vil sjekke, eventuelt lage en feedback boks eller noe liknende.

Endret 8. mai 2008 av cbastus

Logg inn

Får ikkje til onmouseover

Anbefalte innlegg

dedLy_sCoRpIoN

Lenke til kommentar

Videoannonse

hishadow

Lenke til kommentar

cbastus

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer