Passaggio sopra link Anteprima IMG.

01-05-2007, 21.02.06

Come da titolo chiedo se è possibile
realizzare uno scriptino in modo che al passaggio del mouse su un link
appaia una Thumbnail di un immagine di dimensioni che stabilisco io.

Attendo risposte.
Ciau.

FunCool: Sposto in Basi per siti Web.

**Celtenn** · 01-05-2007, 21.32.07

questo è js, non php.

prova a fare che nel caso OnMouseOver si attivi una funzione che fa comparire l'immagine...

**silverseraph** · 01-05-2007, 21.37.46

Puoi fare smeplicemente con i CSS dove nella fase hover ci inserisci l'immagine.

01-05-2007, 21.49.47

ehm.. non ho capito nulla xD

mi potreste spiegare meglio come fare?

01-05-2007, 23.33.56

Nell'Head:

Codice HTML:

<script language="JavaScript">
<!-- 
  function cambia(ImageName,ImageFile){
    ImageName.src = ImageFile;
  }
// -->
</script>

Il link:

Codice HTML:

<a href="http://genta.altervista.org/" 
onMouseOver="cambia(img,'imgon.jpg')" 
onMouseOut="cambia(img,'imgoff.jpg')">
<img border="0" name="img" src="imgoff.jpg">
</a>

Capito?

02-05-2007, 20.28.13

non è quello che cercavo ma ho risolto =)
se vi puo tornare utile posto il codice usato.

da mettere tra i tag <head></head>

Codice PHP:


<script type="text/javascript">



//Specify image paths and optional link (set link to "" for no link):

var dynimages=new Array()

dynimages[0]=["/images/pg1.jpg", "http://www.djweb.altervista.org"]

dynimages[1]=["/images/zd1.jpg", "http://www.djweb.altervista.org"]

dynimages[2]=["/images/sf1.jpg", "http://www.djweb.altervista.org"]

dynimages[3]=["/images/obj1.jpg", "http://www.djweb.altervista.org"]

dynimages[4]=["/images/kdj1.jpg", "http://www.djweb.altervista.org"]

dynimages[5]=["/images/sdj.jpg", "http://www.djweb.altervista.org"]



//Preload images ("yes" or "no"):

var preloadimg="yes"



//Set optional link target to be added to all images with a link:

var optlinktarget=""



//Set image border width

var imgborderwidth=0



//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:

var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"



///////No need to edit beyond here/////



if (preloadimg=="yes"){

for (x=0; x<dynimages.length; x++){

var myimage=new Image()

myimage.src=dynimages[x][0]

}

}



function returnimgcode(theimg){

var imghtml=""

if (theimg[1]!="")

imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'

imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'

if (theimg[1]!="")

imghtml+='</a>'

return imghtml

}



function modifyimage(loadarea, imgindex){

if (document.getElementById){

var imgobj=document.getElementById(loadarea)

if (imgobj.filters && window.createPopup){

imgobj.style.filter=filterstring

imgobj.filters[0].Apply()

}

imgobj.innerHTML=returnimgcode(dynimages[imgindex])

if (imgobj.filters && window.createPopup)

imgobj.filters[0].Play()

return false

}

}



</script>

da mettere per i links:

Codice PHP:


<a href="zd.html" onMouseover="modifyimage('dynloadarea', 0)">oca</a>

<a href="as.html" onMouseover="modifyimage('dynloadarea', 1)">gatto</a>

<a href="sg.html" onMouseover="modifyimage('dynloadarea', 2)">chiodi</a>

<div id="dynloadarea" style="width:80px;height:225px"></div>

per capire il funzionamento questo è il link dove l'ho utilizzato ;) (NO SPAM)

www.djweb.altervista.org/specials.html

Discussione: Passaggio sopra link Anteprima IMG.

LinkBack

Strumenti discussione

Display

Passaggio sopra link Anteprima IMG.

Regole di scrittura