Cartina con ingrandimenti successivi.

memosystem

Cartina con ingrandimenti successivi.

Ciao a tutti,
(anticipo che di javascript è un linguaggio che ho usato per poco tempo anni fa) sto cercando di realizzare un'immagine che, cliccandoci sopra, mi apra un ingrandimento della stessa e in cui possa fare la stessa cosa più volte sino ad arrivare al dettaglio che cerco nella cartina stessa.

Secondo voi una cosa simile è possibile o devo buttarmi per studiarmi un po' di Flash?

Grazie
Stefano

P.S. qualcosa di simile l'ho trovato qua demo-parsifal32.blogspot.com/2010/05/demo-effetto-expando.html ma una volta che l'immagine si ingrandisce deve ingrandirsi ancora e ancora, qualcosa vedevo anche con l'estensione del linguaggio js jquery...

ayrton2001

Ciao memosystem,
occorre capire bene il risultato che desideri.
L'immagine si allarga in tutto lo schermo oppure deve essere contenuta in un box (div) di misura prefissata?
Se desideri che si allarghi puoi agire sugli attributi height e width dell'immagine
Per esempio:

[HTML]
<!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 type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
function allarga() {
$("#miaimg").css("width", ($("#miaimg").css("width").replace("px", "") *1.2)+"px");
$("#miaimg").css("height", ($("#miaimg").css("height").replace("px", "")*1.2)+"px");
}
</script>
</head>
<a href="#" onclick="allarga(); return false;">Allarga</a><br />
<img id="miaimg" src="miaimmagine.jpg" width="155" height="30" alt="Mia immagine" title="Mia immagine" />
<body>
</body>
</html>
[/HTML]

memosystem

Ciao ayrton2001,
innanzi tutto grazie.
Quello che cerco non è proprio quello che hai inserito tu però ci somiglia un po'.
Quello che vorrei fare è una specie di sistema a zoom successivi. Ingrandisco un immagine poi se ci clicco sopra posso ingrandire ancora la zona specifica e cosi via per 3/4 volte almeno

ayrton2001

@memosystem said:

Ciao ayrton2001,
innanzi tutto grazie.
Quello che cerco non è proprio quello che hai inserito tu però ci somiglia un po'.
Quello che vorrei fare è una specie di sistema a zoom successivi. Ingrandisco un immagine poi se ci clicco sopra posso ingrandire ancora la zona specifica e cosi via per 3/4 volte almeno

Allora la strada è questa.
Devi inserire l'immagine in un div con position relative e dare all'immagine position absolute.
Sempre con jquery devi intercettare la posizione dell'immagine in cui si effettua il click (posizione del mouse) e modificare oltre al width e all'height anche top e left.
Ti copio un esempio non funzionante al 100% ma su cui puoi lavorare

[HTML]
<!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 type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#boximg").click(function(e) {
var x = e.pageX - $("#miaimg").offset().left;
var y = e.pageY - $("#miaimg").offset().top;
var top = $("#miaimg").css("top").replace("px", "");
var left = $("#miaimg").css("left").replace("px", "");
var width = $("#miaimg").css("width").replace("px", "");
var height = $("#miaimg").css("height").replace("px", "");
$("#miaimg").css("top", ( -( (height1.2) - height) / 2 )+"px");
$("#miaimg").css("left", ( -( (width1.2) - width) / 2 )+"px");
$("#miaimg").css("height", (height * 1.2)+"px");
$("#miaimg").css("width", (width * 1.2)+"px");
});

$("#boximg").mousemove(function(e) {
	$("#x").html(e.pageX - $("#miaimg").offset().left);
	$("#y").html(e.pageY - $("#miaimg").offset().top);
});

});
</script>
</head>
<div>X: <span id="x"></span> - Y: <span id="y"></span></div>
<div style="width:200px; height:200px; background-color:#FF0000;">
<div style="position:relative;">
<div id="boximg" style="position:absolute; border:5px solid #CCC;width:200px; height:200px;"> </div>
<img id="miaimg" src="immagine.jpg" width="200" height="200" style="position:absolute; top:0px; left:0px;" />
</div>
</div>
<body>
</body>
</html>
[/HTML]

memosystem

Grazie per le dritte! Quando avrò risolto posterò qua il risultato