Ciao a tutti , vi espongo il mio problema , devo costruire in una pag. web un rettangolo bianco 0 fotografia , dove devo inserire da un menu di lato immagini, che spostandole con il mouse si fermano in 3 punti fissi in questo rettangolo, cosa uso html o flash ci sono consigli???
Dipende.
Se per HTML intedi DHTML, e mi sembra chiaro, e il tutto deve essere abbastanza veloce e senza particolari effetti, allora fallo pure in javsascript, però probabilmente ci metterai un po di più.
Se invece punti ad una grafica accattivante, flash è indiscutibilmente migliore. Se devi fare ciò che ho capito, cioè un movimento, con il porgramma Macromedia è tutto moooooolto più controllabile, senza problemi di compatibilità fra browser che in questi casì è veramente pesante da scavalcare.
Insomma se cerchi anche una sfida per te stesso, allora fallo in javascript. Se invece non ti interessa, flash secondo me è sicuramente più indicato.
Avverto che non sono esperto ed espertissimo , se mi puoi dare l'imput in flash poi me lo studio, o in javsascript poi me lo modifico , o qualche esempio magari qui su html ,non mi interessa cose con effetti speciali e ultravivaci deve solo essere funzionale comunque fatto questo ne devo preparare altri 3 molto simili , ma sara' un argomento che riprenedero' + avanti ....Grazie ancora per questo piccolo aiuto almeno so con cosa cominciare
Allora:
Javascript:
Per risolvere il problema in DHTML hai bisogno di uno script javascript che simuli il drag n drop delle finestre. Per questo esistono parecchi script già pronti ceh ti conviene usare, perchè pensare ad uno script del genere da zero è abbastanza complicato, soprattutto per la questione cross-browser già citata. Il migliore che si possa trovare in rete è secondo me quello di Thomas Bratil al sito www.bratta.com. Per fare ciò che penso tu debba fare basta mettere delle condizioni allo spostamento dei div, relative rispetto al rettangolo bianco che usi come contorno o assolute rispetto al bordo del documento, alla finestra del browser per intenderci. Se hai bisogno di aiuto, chiedimi pure, ma credo non prenderai questa strada. Ecco il codice (molto complicato ad una prima occhiata):
[I]
<style type="text/css">
#divDrag0{position:absolute; left:0; top:0; visibility:hidden; clip:rect(0,200,200,0); height:200; width:200; layer-background-color:blue; background-color:blue}
#divDrag1{position:absolute; left:0; top:0; visibility:hidden; clip:rect(0,100,30,0); height:30; width:100;}
#divDrag2{position:absolute; left:0; top:0; visibility:hidden; clip:rect(0,100,100,0); height:100; width:100; layer-background-color:red; background-color:red}
#divDrag3{position:absolute; left:0; top:0; visibility:hidden; clip:rect(0,220,150,0); height:150; width:220; layer-background-image:url('images/back.jpg'); background-image:url('images/back.jpg')}
</style>
<script type="text/javascript" language="JavaScript">
/************************************************** ******************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
I will also appriciate any links you could give me.
************************************************** ******************************/
//Default browsercheck, added to all scripts!
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
//How many layers do you have??
numdrag=4
/************************************************** ******************************
Remember to set the width and height to the same as the clip values when
you change on the layers. If you are adding a image in one of the layers
do like I have done on divDrag3 (see style), add is as a background-image.
Then the drag will be smoother. Remember to set the the height, width and clip
to the exact same as the size of you image.
************************************************** ******************************/
/************************************************** ******************************
Object constructor part.
Setting the objects methods and properties
************************************************** ******************************/
function dragObj(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document .all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.pixelLeft;
this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.pixelTop;
this.moveIt=b_moveIt;
this.drag=false;
this.clickedX=0; this.clickedY=0
return this
}
function b_moveIt(x,y){
this.x=x; this.y=y;
this.css.left=this.x
this.css.top=this.y
}
function mmover(e){
tp=(bw.ns5 || bw.ns4)?e.target.name:window.event.srcElement.tagN ame
if(tp=="DIV" || bw.ns4 || bw.ns5){
num=(bw.ns4 || bw.ns5)?e.target.id.substr(7,2): (bw.ie4 || bw.ie5)?window.event.srcElement.id.substr(7,2):0
oDrag[parseInt(num)].isOver=true
}
}
function mmout(e){
tp=(bw.ns5 || bw.ns4)?e.target.name:window.event.srcElement.tagN ame
if(tp=="DIV" || bw.ns4 || bw.ns5){
num=(bw.ns4)?e.target.id.substr(7,2): (bw.ie4 || bw.ie5)?window.event.srcElement.id.substr(7,2):0
if(bw.ns5) for(var i=0; i<oDrag.length;i++){oDrag[i].isOver=false}
else oDrag[parseInt(num)].isOver=false
}
}
function mup(){
for(var i=0; i<oDrag.length;i++){
if(oDrag[i].isOver) {
oDrag[i].drag=false
}
}
}
function mdown(num){
x=(bw.ns4 || bw.ns5)?num.pageX:event.x
y=(bw.ns4 || bw.ns5)?num.pageY:event.y
for(var i=0; i<oDrag.length;i++){
if(oDrag[i].isOver) {
oDrag[i].drag=true
oDrag[i].clickedX=x-oDrag[i].x
oDrag[i].clickedY=y-oDrag[i].y
cZIndex++
oDrag[i].css.zIndex=cZIndex
}
}
}
function mmove(e){
x=(bw.ns4 || bw.ns5)?e.pageX:event.x
y=(bw.ns4 || bw.ns5)?e.pageY:event.y
for(var i=0; i<oDrag.length;i++){
if(oDrag[i].drag){
oDrag[i].moveIt(x-oDrag[i].clickedX,y-oDrag[i].clickedY)
}
}
return false
}
/************************************************** ******************************
Set this variable to the zIndex you want it to start at, (if you have several
layers and want it to start on the top, change to somthing higher then the uppermost layer
************************************************** ******************************/
cZIndex=10
/************************************************** ******************************
Making objects, Capturing events, when the user mouseovers a layer
the variable/property of that layer names .isOver will
be true, and that means if the user clicks
when he is on top of that layer it becomes draggable
************************************************** ******************************/
function dragInit(){
oDrag=new Array()
for(i=0;i<numdrag;i++){
oDrag[i]=new dragObj('divDrag'+i)
oDrag[i].evnt.onmouseover=mmover;
oDrag[i].evnt.onmouseout=mmout;
}
if(bw.ns4) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP)
document.onmousedown=mdown
document.onmouseup=mup
document.onmousemove=mmove;
//HERE YOU CAN MOVE THE LAYERS TO A POSITION IF YOU WANT TO BEFORE THEY ARE SHOWN.
oDrag[0].moveIt(80,150)
oDrag[1].moveIt(130,120)
oDrag[2].moveIt(170,190)
oDrag[3].moveIt(200,210)
//Showing the layers
for(i=0;i<numdrag;i++){
oDrag.css.visibility='visible'
}
}
onload=dragInit;
</script>
Come vedi è abastanza complicato, anche se una volta analizzato con cura si capisce che non è veramente difficile da comprendere.
Flash:
Ora che mi ci metto, mi sono accorto che con flash è tutto moooolto più semplice e veloce.
Una volta disegnati i tuoi rettangoli con dentro le immagini, convertiti in simboli e nominati ad esempio ret1, ret2, ret3, il codice da inserire nella timeline principale è:
_root.onEnterFrame = function() {
ret1.onPress = function() {
ret1.startDrag(false);
}
ret1.onRelease = function() {
ret1.stopDrag();
}
ret2.onPress = function() {
ret2.startDrag(false);
}
ret2.onRelease = function() {
ret2.stopDrag();
}
ret3.onPress = function() {
ret3.startDrag(false);
}
ret3.onRelease = function() {
ret3.stopDrag();
}
}
}
Se vuoi delimitare la zona di trascinamento delle immagini devi inserire i parametri corretti nella funzione startDrag, com indicato anche nella guida interna di flash.
Per bloccare l'immagine esattamente in un punto passandoci sopra, devi sostituire:
ret1.onRelease = function() {
ret1.stopDrag();
}
con
if(ret1._x == POSX and ret1._y == POSY){
ret1.stopDrag();
}
dove POSX e POSY sono le coordinate dove l'immagine deve essere fermata.
C'è anche un trucco per migliorare quest'ultima parte, tramite l'uso dell'operatore %, ovvero l'operatore che restituisce il resto di una divisione. Infatti può capitare che l'utente non passi con l'immagine esattamente nel punto in cui tu vuoi ceh l'immagine si blocchi. COn l'uso di % si può far sì che questo "punto di fermata" si trasformi in un area di femata, rendendo il tutto più sicuro. Se ne sei interessato fammi sapere.
Spero che tutto ciò ti sia d'aiuto.
ma cosa vedono i miei occhi ma.. ma ... sei di Scorzè che cul... il mondo di internet e vastissimo e con chi scrivo.... quasi con un compaesano io sono di Maerne ciao
Ps. se c'e la faccio faro' una prova questa sera...
ti ringrazio nuovamente
Assurdo, ho un sacco di amici da Maerne. Proprio stasera devo andare a Martellago dai cinesi!
ho visitato il vostro sito pure io suonavo ........ oramai con impegni di lavoro e famiglia ho dovuto lasciare ..
una domanda ma sai usare flash perche studi o lavori ?
ciao oscarchine
please...
io sono felice che vi siate incontrati, ma...
mai sentito parlare di msn?
ciaux
avvevo gia' avvertito che non sono esperto di flash al massimo sono riuscito a fare brevi e semplici filmati con vari effeti maaaaa il codice da inserire nella timeline principale per me' e un mistero.
mi sto studiando il manuale interno del flash ma alcune cose non riesco a capirle..
vediamo dove sbalio io prendo le immagini su qui lavorare ( per iniziare solo tre una gerande e 2 piccole )le inserisco sulla pagina princ. seleziono la prima imm piccola e la trasformo iin simbolo poi seleziono la seconda trasformo in simbolo rinominado la prima in ret 1 e la seconda in ret 2 poi buio completo ...
sbaglio forse perche' devo inserire le foto su dei rettangoli creati con flah? e poi convertirli in simboli?:master:
Un saluto a webdemo ...........
Permessi di invio
Rispondi quotando