salve,
allora ho fatto una sorta di mappa interattiva ; in pratica cliccando su un determinato punto della mappa l'utente vede scorrere differenti img a secondo del punto sulla mappa cliccato; il problema è che ora vorrei aggiungere anche un rispettivo link quindi questo è il codice:
e questo è quello che ho sul body
Il problema è che cliccando sul primo punto le img cambiano correttamente - e nel div link_sopra il link viene sostituito ma quando vado a cliccare in un altro punto le img cambiano correttamente mentre il contenuto del div link_sopra rimane e non cambia! come mai dove sbaglio?
allora ho fatto una sorta di mappa interattiva ; in pratica cliccando su un determinato punto della mappa l'utente vede scorrere differenti img a secondo del punto sulla mappa cliccato; il problema è che ora vorrei aggiungere anche un rispettivo link quindi questo è il codice:
Codice:
function cambia(alfa,beta){
$("#score_sopra").animate({"height": "0"},800);
$("#score_sopra").animate({"height": "200px"},1200);
$('#uno').attr('src','mappa/'+alfa+'/'+ '1.jpg');
$('#due').attr('src','mappa/'+alfa+'/'+ '2.jpg');
$('#tre').attr('src','mappa/'+alfa+'/'+ '3.jpg');
$("#link_sopra").empty();
$("#link_sopra").replaceWith(beta);
}
e questo è quello che ho sul body
HTML:
<div id='sotto' style='margin-bottom:2%;width:960px;'>
<div id='link_sopra' style='float:left;width:100%; text-align:center; border:1px solid red;'>link</div>
<div id='score_sopra' style='position:relative; float:left; margin-left:32%; width:350px; height:200px;margin-top:2%;overflow:hidden; border:2px solid black;margin-bottom:2%;'>
<img id='uno' src='mappa/uno.png' />
<img id='due' src='mappa/due.png' />
<img id='tre' src='mappa/tre.png' />
</div>
<center>
<IMG SRC="img/mappa.jpg" USEMAP="#Map1" style='width:600px; height:529px; border:5px solid red'>
</center>
<MAP NAME="Map1">
<AREA SHAPE="CIRCLE" HREF="#" OnClick="javascript:cambia('paese1','test link1')" title='paese1' alt='paese1' COORDS="445,336,20">
<AREA SHAPE="CIRCLE" HREF="#" OnClick="javascript:cambia('paese2','test link2')" title='paese2' alt='paese' COORDS="488,317,20">
<AREA SHAPE="CIRCLE" HREF="#" OnClick="javascript:cambia('paese3','test link3')" title='paese3' alt='paese3' COORDS="445,336,20">
</MAP>
Il problema è che cliccando sul primo punto le img cambiano correttamente - e nel div link_sopra il link viene sostituito ma quando vado a cliccare in un altro punto le img cambiano correttamente mentre il contenuto del div link_sopra rimane e non cambia! come mai dove sbaglio?