tag REL

salve a tutti. Avrei bisogno di un aiuto. Sto utilizzando lo script Lightbox JS 2.02 (http://www.huddletogether.com/projects/lightbox2/).
Brevemente, per chi non lo conoscesse, è uno script che permette, cliccando su un link (testuale o grafico) di ottenere un'ingrandimento dell'immagine.
Generalemente la cosa funziona in questo modo:
(dopo aver inserito i vari script nell'head si inserisce il collegamento)

<a href="images/image-1.jpg" rel="lightbox">image #1</a>

ora, se io volessi che questo collegamento partisse non da un link tradizionale (<a...></a>) ma da una mappa di un'immagine come posso fare? Poichè noto che il tag REL non è supportato dal tag AREA!

<MAP name="prova">
<AREA shape="rect" href="images/image-1.jpg" coords="0,0,75,57" rel="lightbox" >
</MAP>

Nn potrei fare un mini script semplice semplice del tipo lightbox() e poi al collegamento sulla mappa mettere hert="lightbox()" ?

grazie :wink:

Si Viale , è possibile utilizzare map-area con lightbox !

Ma dovresti fare una modifica su uno dei file Javascript , non so se tu la sai fare, immagino di sì. In ogni caso il file lightbox.js già modificato lo puoi scaricare dal mio sito:

File modificato: http://cons..test-files-js/lightbox.js

Dovrai sostituire il vecchio lightbox.js con il nuovo lightbox.js .

Inoltre scrivi :

<img usemap="#Nome" src="images/map.jpg" alt="" />
<map name="Nome"><area rel="lightbox" shape="rect" coords="0,0,100,100" href="images/part1.jpg">
<map name="Nome"><area rel="lightbox" shape="rect" coords="100,100,200,200" href="images/part2.jpg">

In questo modo , lo hai reso compatibile con il tag "area" , al posto del tag "a" . . .

si, ho cercato sul web e sono riuscito a trovare questa soluzione su un sito inglese. In ogni caso sembrerà strano ma ora non mi serve più, o meglio... è cambiata la situazione. Cioè dovrei usare Lightbox in questo script:

Codice HTML:

---

<SCRIPT type=text/javascript>



var dynimages=new Array()
dynimages[0]=["image/V.jpg", "<b>VERDE</b><br>Cazzate varie", "#ffffff", "33px"]
dynimages[1]=["image/G.jpg", "TESTO 1", "#333333", "161px"]
dynimages[2]=["image/B.jpg", 'TESTO 2 .... <a href="images/image-1.png" [B]rel="lightbox">[/B]Portfolio</a>', "#ffffff", "161px"]
dynimages[3]=["image/R.jpg", "<b>TESTO3", "#ffffff", "161px"]
dynimages[4]=["image/H.jpg", "TESTO4", "", ""]

//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='<DIV style="height:253px; width:550px; background:url('+theimg[0]+')"><p style="margin-left:12px; margin-top:'+theimg[3]+'"><FONT style="FONT-SIZE: 11px" face=arial color='+theimg[2]+'>'+theimg[1]+'</font></p></DIV>'
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>

---

però anche qui l'attributo REL non funziona.. come posso fare?
p.s. ho gia provato a sostituire le " con il codice &... ma non va!

help!!! vi prego

L'array riempilo in questo modo [dove ci sono le virgolette (") ci metti davanti un backslash (\)]:

Codice:

---

dynimages[0]=["image/V.jpg", "<b>VERDE</b><br>Cazzate varie", "#ffffff", "33px"]
dynimages[1]=["image/G.jpg", "TESTO 1", "#333333", "161px"]
dynimages[2]=["image/B.jpg", "TESTO 2 .... <a href=\"images/image-1.png\" rel=\"lightbox\">Portfolio</a>", "#ffffff", "161px"]
dynimages[3]=["image/R.jpg", "<b>TESTO3", "#ffffff", "161px"]
dynimages[4]=["image/H.jpg", "TESTO4", "", ""]

---

Citazione:

---

Originalmente inviato da funcool

L'array riempilo in questo modo [dove ci sono le virgolette (") ci metti davanti un backslash (\)]:

Codice:

---

dynimages[0]=["image/V.jpg", "<b>VERDE</b><br>Cazzate varie", "#ffffff", "33px"]
dynimages[1]=["image/G.jpg", "TESTO 1", "#333333", "161px"]
dynimages[2]=["image/B.jpg", "TESTO 2 .... <a href=\"images/image-1.png\" rel=\"lightbox\">Portfolio</a>", "#ffffff", "161px"]
dynimages[3]=["image/R.jpg", "<b>TESTO3", "#ffffff", "161px"]
dynimages[4]=["image/H.jpg", "TESTO4", "", ""]

---

---

non funziona comunque...

La mia spiegazione serviva solo per dirti come fare a inserire le virgolette.