image map zoomabili

**Polsino2** · 25-08-2003, 12:57

salve io vorrei fare uno zoom su delle immagini e mantenere le proporzioni sulle rispettive imagemap coma posso fare ? per ora ho creato il codice che mi cambia l'immagine e il nome della mappa ma come faccio a crearla automaticamente? c'è un oggetto in jscript che le gestisce? se no posso creare una funzione che scrive nell'html il testo delle varie imagemap? grazie.

**br1** · 25-08-2003, 18:59

In pratica devi ricaricare la pagina passando un parametro che indichi il fattore di ingrandimento... ti faccio un piccolo esempio:

codice:

<head>
<script>
// (c) br1 - 2003
// immagine mappa
var mappa = "mappa.gif"; 
// larghezza originale della mappa
var largo = 100; 
// coordinate delle aree della mappa (in gruppi left,top,right,bottom)
var aree = new Array(
	0,0,50,50,
	50,0,75,50,
	75,0,100,50,
	0,50,50,75,
	0,75,50,100,
	50,50,100,100
	);
// link relativi alle aree definite sopra
var alink = new Array(
	"uno.htm",
	"due.htm",
	"pippo.htm",
	"tre.htm",
	"pluto.htm",
	"quattro.htm"
	);

// leggo il fattore di ingrandimento 
var zoom = parseFloat("0"+location.search.substr(1));
zoom = (zoom==0)?1:zoom;

function ImgInit() {
	dd='[img]'+mappa+'[/img]';
	document.write(dd);
}

function MapInit() {
	for (kk=0;kk<(alink.length);kk++) {
		zz=kk*4;
		dd="<area shape=rect coords=\"";
		dd+=Math.floor(aree[zz]*zoom)+","
		dd+=Math.floor(aree[zz+1]*zoom)+","
		dd+=Math.floor(aree[zz+2]*zoom)+","
		dd+=Math.floor(aree[zz+3]*zoom)+","
		dd+="\" href=\""+alink[kk]+"\">";
		document.write(dd);
	}
}
</script>
</head>
<body onload="document.fZoom.tZoom.value=zoom">
<script>ImgInit();</script>

<map name=br1>
<script>MapInit();</script>
</map>

<form name=fZoom>
<input type=text value=1 name=tZoom size=3>
<input type=button value="Aggiorna" 
 onclick="location.href='?'+this.form.tZoom.value;">
</form>
</body>

ciao

**Polsino2** · 26-08-2003, 08:42

Grazie 1000

M'hai dato proprio una mano.

Ancora Grazie
Andrea

**Polsino2** · 26-08-2003, 08:56

io vorrei fare 2 pusanti zoom + e zoom - quindi dovrei utilizzare una variabile come faccio a utilizzarla all'interno del form per inviarla? Scusa la mia ignoranza ma non sono molto pratico di script.

Grazie

**br1** · 26-08-2003, 10:22

Una possibilita':

<input type=button value="+"
onclick="location.href='?'+(this.form.tZoom.value+ 1);">
<input type=button value="-"
onclick="if(this.form.tZoom.value>1)location.href= '?'+(this.form.tZoom.value-1);">

ciao

**Polsino2** · 26-08-2003, 11:52

Grazie Ancora

Ciao.

Andrea

**maxidvdit** · 21-11-2010, 15:47

so che la discussione è vecchia...
ho provato ad applicare la soluzione per me (senza cambiare i link e le aree, solo per vedere se funzionava lo zoom) e:
1) non si adatta al browser
2) non funzionano i tasti zoom

ecco la sede della prova http://macrocosmo.eu/img.html

Grazie per l'aiuto...

**maxidvdit** · 22-11-2010, 19:24

risolto il problema dei tasti zoom...
si potrebbe zoomare in negativo quindi piu piccolo dell'originale?

**br1** · 22-11-2010, 20:04

Certo... basta impostare valori inferiori a uno: 0.5 0.25 eccetera

**maxidvdit** · 22-11-2010, 20:17

ah, ok grazie mille!!!
e per quanto riguarda l'adattamento alla finestra niente vero?

Discussione: image map zoomabili

Strumenti discussione

Ricerca discussione

Visualizza

image map

grazie

domanda 2

grazie

Permessi di invio