Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

JQuery change the source of an image having a usemap

Pagina: 1
Acties:

  • lensy
  • Registratie: Februari 2009
  • Laatst online: 20-11 15:18
Edit: opgelost! Lag aan ImageMapster die ik moest unbinden en dan opnieuw toevoegen


Hallo,

Ik wil op mijn scoutssite zorgen dat gebruikers makkelijk kunnen zien wat er op een uniform moet door met de muis op een onderdeel van een foto te hoveren, waarvoor ik dus een imagemap gebruik en de ImageMapster plugin voor JQuery.

Nu zijn er ook op de andere kanten van het uniform onderdelen, dus ik wil dat de gebruiker de foto zogezegd kan roteren, wat overeenkomt met een volgende foto tonen waarop de persoon een beetje gedraaid is (met behulp van de zichtbare pijl of pijlen van je toetsenbord). Zo komt er een semi-3D gevoel. Dit lukt al zonder de imagemap.

Als ik echter de source van een foto met imagemap wil veranderen gaat het mis: de foto wiens src ik aanpas wordt niet herladen door de browser. Bekijk ik de broncode wordt de src correct aangepast, maar wordt dit niet weergegeven. Het toevoegen van een timestamp bij het aanpassen van de src om te zorgen dat de browser de image refresht (zoals hier gezegd) verandert hier niets aan.


HTML:
1
2
3
4
<img id="test" src="image1.jpg" usemap="#map1" />
<map name="map1">
  <area shape="poly" coords="...." href="#" />
</map>

JavaScript:
1
2
3
4
5
6
7
8
function showPicture(){
  var newImg = "image"+newindex+".jpg";

  $("#test").removeAttr("usemap");     //met dit lukt het
  $("#test").attr("usemap", "#imgmap"+newindex);      //met dit lukt het niet

  $("#test").attr("src", newImg+"?" + new Date().getTime());
}


Ik heb al geprobeerd de imagemap pas aan te passen als de foto geladen is (dus binnen de load() bij het veranderen van de src), maar dit doet niets. Als ik de imagemap verwijder wil hij wel de volgende foto tonen, maar voeg ik de imagemap (of een andere) opnieuw toe dan lukt het weer niet.

Iemand enige ideeën? Als er iemand trouwens een library of plugin kent waarmee je kan behalen wat ik wil, laat het mij zeker weten! Ik wil zeker niet het wiel opnieuw uitvinden ;)


Alvast bedankt.


edit: vergat de titel van mijn zelfde vraag in Stackoverflow aan te passen, dit kan ik blijkbaar niet meer doen?

[ Voor 7% gewijzigd door lensy op 14-12-2012 10:46 . Reden: links verwijderd ]