[HTML/JAVA] onclick plaatje

[Verwijderd]

De titel is misschien makkelijker dan dat het is maar ik wist niks beters,

ik heb een lijst met namen, daarvoor heb ik blauwe enveloppen met email adressen wanneer ik op zo'n envelop klik moet deze rood worden (deze persoon krijgt dan mail) en wanneer ik er nog een keer op klik moet deze weer netjes blauw worden (deze persoon krijgt toch geen mail)

Nu ben ik al een aardig eind alleen het werkt helaas nog niet, heeft iemand een betere of andere oplossing of weet je hoe dit afgemaakt kan worden dan hoor ik het graag, ik zit vast

het moet per se met javascript omdat het lokaal te gebruiken moet zijn.

code:

<img border="0" 

onClick="if(this.src!='images/rc_enveloppe.gif') {this.src='images/rc_enveloppe.gif'} else {this.src='images/b_enveloppe.gif'};" 
onMouseOver="this.src='images/bo_enveloppe.gif'; this.style.cursor='hand'" 
onMouseOut="if(this.src!='images/rc_enveloppe.gif') {this.src='images/b_enveloppe.gif'} else {this.src='images/rc_enveloppe'}" 

src="images/b_enveloppe.gif" width="25" height="16"> 

op de een of andere manier vind hij this.src= hier leuk want wanneer ik op het plaatje klik word deze rood, maar wanneer 
ik er vervolgens weer af ga word deze gewoon weer blauw 

b_enveloppe.gif = Blauwe enveloppe 
bo_enveloppe.gif = Blauwe enveloppe Over 
rc_enveloppe.gif = Rode enveloppe   Click

-marcel

[.oisyn]

java is geen javascript
P&W FAQ - HTML / javascript / css, etc...
(en kom op, het moet je toch wel opgevallen zijn dat dat soort vragen gewoon helemaal niet in PW voorkomen)

PW -> WG

[crisp]

kijk eens goed naar je logica. Wat is de src property van je image bij onmouseover? waarom gaat 'ie bij onmouseout dan altijd de else uitvoeren?
Je zult dus ergens de 'state' bij moeten houden, bijvoorbeeld in een custom property of in een global js variabele.

[Verwijderd]

goh, de vriendelijkheid straalt er weer vanaf vandaag...
het spijt me zeer dat ik dit verkeer gepost heb.

crisp, hij voert bij die onmouseout een else uit om de volgende reden:
wanneer hij al rood is, mag hij niet ineens blauw worden en andersom, wanneer hij blauwag hij niet ineens rood worden.

de kleur mag dus alleen veranderen na een onClick.

[Johnny]

Verwijderd schreef op 21 October 2003 @ 18:59:

crisp, hij voert bij die onmouseout een else uit om de volgende reden:
wanneer hij al rood is, mag hij niet ineens blauw worden en andersom, wanneer hij blauwag hij niet ineens rood worden.

de kleur mag dus alleen veranderen na een onClick.

Je spreekt jezelf tegen. Als de kleur alleen mag veranderen bij een onclick, wat heeft een onmouseout daar dan mee te maken? Want zodra de cursor van het plaatje af gaat vervolgens hij weer terug naar blauw. En dat wil je toch juist niet?

Bekijk het eens logisch:
event: onclick, -> kijk of het plaatje blauw is
> ja? maak het rood
> nee, maak het blauw

Dat is alles wat je nodig hebt, je hoeft het alleen maar om te zetten naar javascript. Geen onmouseout!

[Verwijderd]

oke, maar dan zit ik automatisch ook met de onMouseOver, want wanneer je eroverheen gaat dan word die lichtblauw maar dat blijft dan standaard zo wanneer weer van het plaatje af gaat.

anywayz.. ik heb nu die twee eruit gehaald

code:

<img border="0" 
onClick="if(this.src!='images/rc_enveloppe.gif') {this.src='images/rc_enveloppe.gif'} else {this.src='images/b_enveloppe.gif'};" 
src="images/b_enveloppe.gif" width="25" height="16">

wanneer ik er nu op klik word hij netjes rood, en dat blijft ook zo wanneer ik er weer vanaf ga, maar als ik er dan voor een 2e keer op klik moet hij weer blauw worden, en dat werkt nog niet.

[creative8500]

Zet eens een alert(this.src) in de else-statement. Waarschijnijk is het zo dat daarin namelijk niet het relatieve pad naar het plaatje staat, maar het absolute. Dan geeft this.src!='images/rc_enveloppe.gif' true terug, omdat 'http://www.domein.nl/images/rc_enveloppe.gif'!='images/rc_enveloppe.gif'. Dus dan wordt nogmaals de rode-envelop als plaatje ingesteld.

[slm]

wat creative zei, klopt. this.src geeft de filenaam + pad.

je dus zoiets als dit moeten gebruiken:

code:

onClick="this.src=(this.src.indexOf('on.jpg')<0?'on.jpg':'off.jpg')"

vervang de on.jpg en off.jpg door de namen van je eigen pics

[crisp]

dit idee is ook wel aardig:

JavaScript:

var images = [];
images['on'] = new Image(); images['on'].src = 'images/on.gif';
images['off'] = new Image(); images['off'].src = 'images/off.gif';
images['over'] = new Image(); images['over'].src = 'images/over.gif';

var states = [];

function imageClick(img) {

  if (typeof states[img.id] == 'undefined') states[img.id] = 1;
  else states[img.id] = 1 - states[img.id];

  img.src = states[img.id] ? images['on'].src : images['off'].src;

}

function imageOver(img) {

  img.src = images['over'].src;

}

function imageOut(img) {

  if (typeof states[img.id] == 'undefined') states[img.id] = 0;

  img.src = states[img.id] ? images['on'].src : images['off'].src;

}

HTML:

<img id="img1" src="images/off.gif"
  onclick="imageClick(this)"
  onmouseover="imageOver(this)"
  onmouseout="imageOut(this)" alt="" />

[Verwijderd]

dit is het idd

bedankt


*edit
dit javascript is idd ook wel geinig, iets omslachtiger maar wel met mouseOver,
er zit overgens een klein foutje in

img vergeten.
function imageOut(img) { }

bedankt iig

[ Voor 80% gewijzigd door Verwijderd op 21-10-2003 22:51 ]

[crisp]

Verwijderd schreef op 21 oktober 2003 @ 22:45:
dit is het idd

bedankt


*edit
dit javascript is idd ook wel geinig, iets omslachtiger maar wel met mouseOver,
er zit overgens een klein foutje in

img vergeten.
function imageOut(img) { }

bedankt iig

Ik heb dit dan ook uit m'n hoofd even getikt - iets wat je dus leert door veel zelf te doen en uit te proberen. Sowieso je code herbruikbaar maken (en dus gebruik maken van functies) is vele malen handiger en overzichtelijker. Javascript is inderdaad geinig, maar ook nog eens een hele krachtige taal