Javascript mouseover image werkt niet - Softwareontwikkeling

dinsdag 13 oktober 2009 18:50

Acties:

0 Henk 'm!

Topicstarter

Ik ben laten we zeggen een heel nieuw groentje in de wereld van webdesign, maar voor school moeten we dus een website bouwen. Het hoeft nog niet zo heel veel voor te stellen, het gaat vooral om de basis. Aangezien ik die basis al grotendeels kende besloot ik me dan maar eens in javascript te verdiepen. Het doel is om een simpele mouseover image te maken waar een stilstaande gif wordt vervangen door een bewegende gif als de cursor er over heen gaat. Ik kwam een redelijk goede en makkelijk te volgen tutorial tegen. Namelijk deze,en na het volgen van deze instructies werkt mijn mouseover in firefox 3.0 maar niet in IE8, safari 4.0 of Opera 10.

Wat ik tot nu heb staan is:

code:

<!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">

<head>

<script language="javascript">
<!--

<a href="javascript:void(0)" onmouseover="overmyimage()"  
onmouseout="outmyimage()"><img src="images/afbeelding01_uit.gif" /> name="image"  
width=400px height=424px border=0></a> 

function activate() {  
document.images["image"].src = "images/afbeelding01.gif";  
}

function deactivate() {  
document.images["image"].src = "images/afbeelding01_uit.gif"; 
} 

--> 
</script>

<title>Website van Serge Vogelzang</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>

En op de plek waar de mouseover staat:

code:

1
2
3

<a href="javascript:void(0)" onmouseover="activate()"  
onmouseout="deactivate()"><img src="images/afbeelding01_uit.gif" width=400px  
height=424px border=0 name="image"></a

Mijn vraag is waarschijnlijk een noob vraag, maar ik kwam hem ook zo niet tegen met de search. En aangezien ik redelijk groen ben met html en helemaal met javascript is mijn vraag vooral wat ik hier fout doe.
Ik heb het al aan de twee leraren gevraagd op school, maar dat zijn van die types die je geen meter verder kunnen helpen. Don't know of ze het niet willen, niet weten of iets anders, maar ik krijg het er in ieder geval niet uit. Vandaar dat ik jullie hiermee lastig val.

dinsdag 13 oktober 2009 18:55

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

1 tip: Tutorials die Netscape navigator nog steeds al relevant beschouwen en stammen uit December 27th, 2001 zullen je niet veel meer bijbrengen dan bad practices en zwaar verouderde kennis

Dan: Zonder dat ik verder heb gekeken: Wat doet een <a> element in je <script> body in je <head>

[ Voor 39% gewijzigd door RobIII op 13-10-2009 18:56 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 13 oktober 2009 18:56

Acties:

0 Henk 'm!

HuHu

Die tutorial zegt niet dat je die <a href ... </a> op regel 9 moet plaatsen, daar staat het namelijk fout. Dat moet sowieso naar de body van je html document.

dinsdag 13 oktober 2009 18:57

Acties:

0 Henk 'm!

sergev

Topicstarter

Oeps, had daar toch iets beter moeten kijken

dinsdag 13 oktober 2009 18:57

Acties:

0 Henk 'm!

HuHu

Ow... onderaan die pagina staat trouwens: view the code. Druk daar eens op

.

dinsdag 13 oktober 2009 18:58

Acties:

0 Henk 'm!

RobertMe

HTML:

1
2
3

<a href="javascript:void(0)" onmouseover="overmyimage()"  
onmouseout="outmyimage()"><img src="images/afbeelding01_uit.gif" /> name="image"  
width=400px height=424px border=0></a>

Wat doet dat tussen de <script> tags? Waarschijnlijk is het enige wat het daar doet de JS parser over z'n nek laten gaan...

Probeer overigens ook voor het W3C (en MS) event model te gaan, maar niet voor het netscape event model. Het plaatsen van al deze JS events in je HTML staat zo slordig. Dus onmouseover="wat js code" word dan iets van [element waarop je iets wil doen].addEventListener('mouseover', [functie die je wilt aanroepen], false); (of die laatste true, is event bubbling vs. capturing). Zie o.a. deze en deze link

edit:

* RobertMe is langzaam

dinsdag 13 oktober 2009 19:17

Acties:

0 Henk 'm!

sergev

Topicstarter

RobertMe thanx, dat verduidelijkt een boel! Moet het nog even beter doorlezen maar mijn mouseover image werkt nu naar behoren in elke browser die ik momenteel heb. Thanx voor de snelle replies.

dinsdag 13 oktober 2009 22:05

Acties:

0 Henk 'm!

Sebazztiaan

sebas!

Het enige wat hij wil is een bg-image veranderen als je mouseovert,

daar is de hover pseudo class voor! (:hover)

code:

a.class {
  background-image:url(img.jpg);
}

a.class:hover {
  background-image:url(img-hover.jpg);
}

woensdag 14 oktober 2009 11:31

Acties:

0 Henk 'm!

ZpAz

Sebazztiaan schreef op dinsdag 13 oktober 2009 @ 22:05:
Het enige wat hij wil is een bg-image veranderen als je mouseovert,

daar is de hover pseudo class voor! (:hover)
code:
1
2
3
4
5
6
7
a.class {
  background-image:url(img.jpg);
}

a.class:hover {
  background-image:url(img-hover.jpg);
}

Voor de IE6 supporters onder ons, IE6 ondersteund die psuedo class enkel op 'a' elementen. Met o.a whatever:hover kan je dat fixen op IE6 browsers waar JS aan staat.

[ Voor 12% gewijzigd door ZpAz op 14-10-2009 11:32 ]

Tweakers Time Machine Browser Extension | Chrome : Firefox

woensdag 14 oktober 2009 12:23

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

ZpAz schreef op woensdag 14 oktober 2009 @ 11:31:
[...]

Voor de IE6 supporters onder ons, IE6 ondersteund die psuedo class enkel op 'a' elementen. Met o.a whatever:hover kan je dat fixen op IE6 browsers waar JS aan staat.

Bij redelijk complexe pagina's maakt dat echter wel de boel zo traag als dikke str*nt

Persoonlijk zou ik zeker voor stylistische effectjes gewoon geen rekening meer houden met dat lijk.

Intentionally left blank

woensdag 14 oktober 2009 12:28

Acties:

0 Henk 'm!

TERW_DAN

Met een hamer past alles.

Sebazztiaan schreef op dinsdag 13 oktober 2009 @ 22:05:
Het enige wat hij wil is een bg-image veranderen als je mouseovert,

daar is de hover pseudo class voor! (:hover)
code:
1
2
3
4
5
6
7
a.class {
  background-image:url(img.jpg);
}

a.class:hover {
  background-image:url(img-hover.jpg);
}

Wat je ook kunt doen en wat nog een aanzienlijk snelheidsverschil op weet te leveren als je het veel op je pagina gebruikt, is de plaatjes aan elkaar plakken en met backgroundpositions gaan werken. Zoek daarvoor eens op 'css image sprites'. Afhankelijk van de plaatjes scheelt het flink in grootte, het scheelt flink in serverrequests en het voordeel is dat al die plaatjes in 1 keer geladen zijn.

woensdag 14 oktober 2009 12:30

Acties:

0 Henk 'm!

ZpAz

crisp schreef op woensdag 14 oktober 2009 @ 12:23:
[...]

Bij redelijk complexe pagina's maakt dat echter wel de boel zo traag als dikke str*nt

Persoonlijk zou ik zeker voor stylistische effectjes gewoon geen rekening meer houden met dat lijk.

Die browser is zelf al zo traag al dikke str*nt, dus de gebruikerservaring voor die mensen gaat er dan niet op achteruit

En je zou natuurlijk dmv de conditional comments het alleen voor IE6 laten gebruiken, zodat andere browsers niet vertraagt worden. (Voor zover die ook 'behaviour' gebruiken.

Tweakers Time Machine Browser Extension | Chrome : Firefox

woensdag 14 oktober 2009 12:36

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

ZpAz schreef op woensdag 14 oktober 2009 @ 12:30:
[...]

Die browser is zelf al zo traag al dikke str*nt, dus de gebruikerservaring voor die mensen gaat er dan niet op achteruit En je zou natuurlijk dmv de conditional comments het alleen voor IE6 laten gebruiken, zodat andere browsers niet vertraagt worden. (Voor zover die ook 'behaviour' gebruiken.

Ik heb een paar jaar geleden getracht dat toe te passen hier op tweakers.net. Met de standaard versie van whatever:hover van Peter (Clay) resulteerde dat in clientside pagerendertijden van >30 seconden(!). Zelfs met een zelf zwaar geoptimaliseerde versie kreeg ik de rendertijden voor IE niet onder de 5 seconden, dus heb ik dat idee toen subiet weer laten varen.

Intentionally left blank

woensdag 14 oktober 2009 13:04

Acties:

0 Henk 'm!

mcDavid

Sebazztiaan schreef op dinsdag 13 oktober 2009 @ 22:05:
Het enige wat hij wil is een bg-image veranderen als je mouseovert,

daar is de hover pseudo class voor! (:hover)
code:
1
2
3
4
5
6
7
a.class {
  background-image:url(img.jpg);
}

a.class:hover {
  background-image:url(img-hover.jpg);
}

Dan heb je niet goed gelezen, het gaat juist om een inline-image en níét om een bg-image.

Afhankelijk van de toepassing is het wellicht wel/niet handiger om hier een bg-image van te maken.

woensdag 14 oktober 2009 13:16

Acties:

0 Henk 'm!

CH4OS

It's a kind of magic

mcDavid schreef op woensdag 14 oktober 2009 @ 13:04:
[...]

Dan heb je niet goed gelezen, het gaat juist om een inline-image en níét om een bg-image.

Afhankelijk van de toepassing is het wellicht wel/niet handiger om hier een bg-image van te maken.

Plus hetgeen je citeerde werkt niet met alle browsers.

woensdag 14 oktober 2009 13:37

Acties:

0 Henk 'm!

ZpAz

crisp schreef op woensdag 14 oktober 2009 @ 12:36:
[...]

Ik heb een paar jaar geleden getracht dat toe te passen hier op tweakers.net. Met de standaard versie van whatever:hover van Peter (Clay) resulteerde dat in clientside pagerendertijden van >30 seconden(!). Zelfs met een zelf zwaar geoptimaliseerde versie kreeg ik de rendertijden voor IE niet onder de 5 seconden, dus heb ik dat idee toen subiet weer laten varen.

Das wel heel erg inderdaad, maar heeft het geen effect waar je die 'behaviour' plaatst? In het voorbeeld wordt hij in de body { } gegooid, maar als je enkel een hover hebt toegevoegd op bijvoorbeeld sommige li elementen, dan zou je die behaviour daar op kunnen gooien lijkt me?

Tweakers Time Machine Browser Extension | Chrome : Firefox

woensdag 14 oktober 2009 13:49

Acties:

0 Henk 'm!

mcDavid

GJtje schreef op woensdag 14 oktober 2009 @ 13:16:
[...]
Plus hetgeen je citeerde werkt niet met alle browsers.

Daar zou ik me dan weer niet al te sappel om maken, tenzij het een fundamenteel onderdeel van de paginastructuur is.

donderdag 15 oktober 2009 14:45

Acties:

0 Henk 'm!

Sebazztiaan

sebas!

mcDavid schreef op woensdag 14 oktober 2009 @ 13:04:
[...]

Dan heb je niet goed gelezen, het gaat juist om een inline-image en níét om een bg-image.

Afhankelijk van de toepassing is het wellicht wel/niet handiger om hier een bg-image van te maken.

Hmmm, sinds wanneer is semantisch een afbeelding een link?

aka hoe gaan screenreaders met een afbeelding om? , tekst uit een link halen, terwijl de tekst te zien moet zijn kan met css

code:

a {
  background-image:url(img.png);
  background-position:0 0;
  text-indent:-9999px;
  display:block;
  overflow:hidden;
  height: [x]
  width: [y]
}

a:hover {
  background-position:0 -[y];
}