Aide - Recherche - Membres - Calendrier
Version complète : image "swapée" en tant que lien vers popup
Forum Développeur - Administration serveur, programmation et base de données > Programmation > Javascript et AJAX
kompo
bonjour,
j'ai réalisé une page "portfolio" avec des icones qui une fois cliqués - à l'aide de la fonction MM_swapImage() - chargent une image bien définie dans une autre 'grande' image unique (celle-ci sert de réceptacle pour toutes les images a visualiser) . jusque là facile (les icones ainsi que le réceptacle ont des attibuts "name",...)

Sauf que j'aimerais savoir s'il est possible que cette grande image "réceptacle" agisse elle aussi comme un lien. Je m'explique : je click sur mon icone pour apercevoir un travail et je click sur cet aperçu pour par exemple ouvrir un popup contenant ce travail en détail.

La difficulté est que cette 'image réceptacle' doit savoir ce qu'elle à chargée ("01.jpg,...) afin que quand on clique dessus il y ait autant de liens differents que l'on veut.

Un array serait-il la meilleur solution pour mettre en place ce système ?
Si oui, par ou commencer ?
Merci de vos idées par avance

K.
kompo
Bon, je me réponds partiellement à moi-même :-D
j'ai trouvé une (grande) partie de ce que voulais faire ici :
Image thumbnail viewer II

cependant, après avoir fait le tour du code , j'ai un souci pour "paramétrer" la taille du popup a faire surgir. Par rapport au code original, j'ai ajouté une fonction popup que j'apelle par un onClick mais ca fonctionne pas seulle <a href="#" est pris en compte ca ne lit pas plus loin...

Si vous avez un avis sur ce morceau de code (mis à part qu'il n'est pas optimisé) ?

Merci d'avance


CODE




var dynimages=new Array()

dynimages[0]=["book/intropf.jpg", ""]

dynimages[1]=["book/flynt3.jpg", "frame_anim.htm"]

//etc mon array est ici dynimages[1]=[...]





var preloadimg="no"



var optlinktarget="newwin"



function popup()

{

var h = 500; // hauteur de la popup

var l = 600; // largeur de la popup

var PosX = ( screen.availWidth - h ) / 2;

var PosY = ( screen.availHeight - l ) / 2;

var option = "resizable=no,top="+PosY+",left="+PosX+",width="+h+",height="+l;

window.open("","newwin",option);

}



var imgborderwidth=0



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]!="")



// JE RAPELLE LES PARAMETRES POPUP AVEC LA COMMANDE CI DESSOUS

imghtml='<a href="#" onClick="popup('+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

}

}





dans le BODY :
CODE


<a href="#" style="cursor:hand; cursor:pointer" onclick="return  modifyimage('dynloadarea', 1)"><img src="test.gif" name="imagetest"></a>

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2009 Invision Power Services, Inc.