Come posso evidenziare il numero relativo all'immagine caricata?

**aramis81** · 16-06-2013, 17:38

Ciao!
Vorrei fare in modo che all'apertura di un'immagine sulla pagina cambi il colore del numero relativo ad essa.Mi spiego meglio. Lo screenshot della pagina web lo trovate al seguente link:
https://www.dropbox.com/s/4q7fi0ueg7ng7n4/ImgSito2.jpg

Come potete vedere sopra all'immagine ci sono i numeri(01 02 ... 15). Per cambiare immagine si può cliccare sui numeri oppure a destra e sinistra dell'immagine stessa per lo scorrimento veloce. Vorrei fare in modo che quando apro l'immagine in uno dei due modi descritti sopra, cambi il colore del numero relativo all'immagine attualmente visualizzata.
Posto anche la porzione di codice relativo alle immagini e ai numeri.

codice:

<p id="IMGIniziale" style="position:absolute; left:265px; top:153px; width:679px; height:430px;">
    BACK
    

    


</p>

<div id="Immagini" style="position:absolute; left:576px; top:149px; width:438px; height:30px; z-index:19;">
    <blockquote>
      

<FONT size=2>01</FONT>
        <FONT size=2>02</FONT>
        <FONT size=2>03</FONT>
        <FONT size=2>04</FONT>
        <FONT size=2>05</FONT>
        <FONT size=2>06</FONT>
        <FONT size=2>07</FONT>
        <FONT size=2>08</FONT>
        <FONT size=2>09</FONT>
        <FONT size=2>10</FONT>
        <FONT size=2>11</FONT>        
        <FONT size=2>12</FONT>
        <FONT size=2>13</FONT>
        <FONT size=2>14</FONT>
        <FONT size=2>15</FONT>  
        <FONT size=2> Description</FONT></p>
    </blockquote>
</div>

<div id="Img1" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:20;">[img]PicturesImageProgetti/Shenhua/Shenhua_01.jpg[/img]
  <map name="Image_1Map">
    <area shape="rect" coords="450,8,669,397" href="#" onClick="ChiudiTotLayer1();ShowLayer('Img2')">
    <area shape="rect" coords="6,10,225,399" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img15')">
  </map>
</div>
<div id="Img2" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:21">[img]PicturesImageProgetti/Shenhua/Shenhua_02.jpg[/img]
  <map name="Image_2Map">
    <area shape="rect" coords="451,9,668,399" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img3')">
    <area shape="rect" coords="6,10,225,394" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img1')">
  </map>
</div>
<div id="Img3" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:22">[img]PicturesImageProgetti/Shenhua/Shenhua_03.jpg[/img]
  <map name="Image_3Map">
    <area shape="rect" coords="455,8,668,395" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img4')">
    <area shape="rect" coords="6,10,225,401" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img2')">
  </map>
</div>
<div id="Img4" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:23">[img]PicturesImageProgetti/Shenhua/Shenhua_04.jpg[/img]
  <map name="Image_4Map">
    <area shape="rect" coords="455,8,668,395" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img5')">
    <area shape="rect" coords="6,10,225,401" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img3')">
  </map>
</div>
<div id="Img5" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:24">[img]PicturesImageProgetti/Shenhua/Shenhua_05.jpg[/img]
  <map name="Image_5Map">
    <area shape="rect" coords="455,8,668,395" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img6')">
    <area shape="rect" coords="6,10,225,401" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img4')">
  </map>
</div>
<div id="Img6" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:25">[img]PicturesImageProgetti/Shenhua/Shenhua_06.jpg[/img]
  <map name="Image_6Map">
    <area shape="rect" coords="379,9,565,391" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img7')">
    <area shape="rect" coords="6,10,225,401" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img5')">
  </map>
</div>
<div id="Img7" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:26">[img]PicturesImageProgetti/Shenhua/Shenhua_07.jpg[/img]
  <map name="Image_7Map">
    <area shape="rect" coords="350,12,513,397" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img8')">
    <area shape="rect" coords="6,13,196,401" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img6')">
  </map>
</div>
<div id="Img8" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:27">[img]PicturesImageProgetti/Shenhua/Shenhua_08.jpg[/img]
  <map name="Image_8Map">
    <area shape="rect" coords="335,11,508,397" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img9')">
    <area shape="rect" coords="6,11,190,401" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img7')">
  </map>
</div>
<div id="Img9" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:28">[img]PicturesImageProgetti/Shenhua/Shenhua_09.jpg[/img]
  <map name="Image_9Map">
    <area shape="rect" coords="349,10,512,397" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img10')">
    <area shape="rect" coords="6,8,176,401" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img8')">
  </map>
</div>
<div id="Img10" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:29">[img]PicturesImageProgetti/Shenhua/Shenhua_10.jpg[/img]
  <map name="Image_10Map">
    <area shape="rect" coords="347,10,512,397" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img11')">
    <area shape="rect" coords="6,11,177,401" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img9')">
  </map>
</div>
<div id="Img11" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:30">[img]PicturesImageProgetti/Shenhua/Shenhua_11.jpg[/img]
  <map name="Image_11Map">
    <area shape="rect" coords="342,12,512,396" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img12')">
    <area shape="rect" coords="6,8,171,401" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img10')">
  </map>
</div>
<div id="Img12" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:31">[img]PicturesImageProgetti/Shenhua/Shenhua_12.jpg[/img]
  <map name="Image_12Map">
    <area shape="rect" coords="343,11,513,399" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img13')">
    <area shape="rect" coords="6,10,177,401" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img11')">
  </map>
</div>
<div id="Img13" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:32">[img]PicturesImageProgetti/Shenhua/Shenhua_13.jpg[/img]
  <map name="Image_13Map">
    <area shape="rect" coords="360,11,514,396" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img14')">
    <area shape="rect" coords="6,10,168,401" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img12')">
  </map>
</div>
<div id="Img14" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:33">[img]PicturesImageProgetti/Shenhua/Shenhua_14.jpg[/img]
  <map name="Image_14Map">
    <area shape="rect" coords="336,12,510,399" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img15')">
    <area shape="rect" coords="6,12,180,401" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img13')">
  </map>
</div>
<div id="Img15" style="position:absolute; left:265px; top:196px; width:679px; height:410px; z-index:34">[img]PicturesImageProgetti/Shenhua/Shenhua_15.jpg[/img]
  <map name="Image_15Map">
    <area shape="rect" coords="8,9,220,401" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img14')">
    <area shape="rect" coords="455,8,673,394" href="#"onClick="ChiudiTotLayer1();ShowLayer('Img1')">
  </map>
</div>

**Nobody33** · 16-06-2013, 21:01

Link alla pagina?
Magari lo carichi da qualche parte

grazie

**aramis81** · 17-06-2013, 09:59

http://www.workshop7.it/PageWorksProgettiShenhua.html

grazie a te!

**ac_socmel** · 17-06-2013, 10:22

lo puoi fare sicuramente in javascript
una volta avevo messo insieme questo

codice:

onload=function()
{if(!document.getElementById||!document.getElementsByTagName)return;
ext=document.getElementById("links");l=ext.getElementsByTagName("a");
for(i=0;i<l.length;i++)l[i].onclick=function()
{document.getElementById('sel').setAttribute('id','');
this.setAttribute('id','sel')}}

ma se aspetti qualcuno che mastica javascript ti darà una soluzione più elegante e recente

**aramis81** · 17-06-2013, 10:48

Innanzitutto grazie!
Però non riesco a farlo funzionare. Dove lo devo inserire?

**ac_socmel** · 17-06-2013, 11:03

io ce l'avevo in un foglio esterno richiamato nell'head della pagina html
ma ti ripeto è un vecchio codice meglio se aspetti qualcuno più aggiornato

ecco la pagina d'esempio

codice:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border: none;
}
body {
	font-family: Verdana, sans-serif;
	text-align: center;
}
.links {
	margin: 0px auto;
	list-style-type: none;
	/*line-height: 1.5em;*/
	padding: 8px;
	overflow: hidden;
}
.links li {
	margin: 8px;
	padding: 0em;
	/*border: 1px solid rgba(0,0,0,1);*/
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	display: inline-block;
	line-height: 2em;
}
.links a:link, .links a:visited, .links a:focus {
	color: rgba(205, 205, 255, 1);
	border: 1px solid rgba(255, 255, 51, 1);
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);/**/
	padding: 0.5em 1em;
	text-decoration: none;
	/*display: block;*/
	background-color: rgba(80, 80, 80, 1);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
 from(rgba(80, 80, 80, 1)), to(rgba(160, 160, 160, 1)));
	-webkit-box-shadow: 0 2px 8px rgba(20, 20, 20, .8);
	-moz-box-shadow: 0 2px 8px rgba(20, 20, 20, .8);
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	outline: none
}
.links a:hover {
	color: rgba(255, 255, 255, 1);
	border: 1px solid rgba(255, 255, 255, 1);
	text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
	background-color: rgba(160, 160, 160, 1);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
 from(rgba(160, 160, 160, 1)), to(rgba(80, 80, 80, 1)));
	-webkit-box-shadow: 0 1px 8px rgba(0, 0, 255, 1);
	-moz-box-shadow: 0 1px 8px rgba(0, 0, 255, 1);
}
#sel, #sel:hover, .links a:active {
	color: rgba(255, 255, 255, 1);
	border: 1px solid rgba(51, 51, 51, 1);
	text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
	background-color: rgba(160, 160, 160, 1);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
 from(rgba(160, 160, 160, 1)), to(rgba(80, 80, 80, 1)));
	-webkit-box-shadow: 0 1px 8px rgba(0, 0, 255, 1);
	-moz-box-shadow: 0 1px 8px rgba(0, 0, 255, 1);
}
</style>
<script type="text/javascript" src="foot.js"></script>
</head>
<body>
<ul class="links" id="links">[*]gfhfh[*]hfgfgd[*]dghff[/list]
</body>
</html>

**aramis81** · 18-06-2013, 20:05

ok,grazie! Intanto provo l'effetto di questo sulla pagina. Sei stato davvero gentile!

**aramis81** · 22-06-2013, 16:29

Provata ma non funziona sulla mia pagina. Qualcun altro ha una soluzione?
Grazie.

**ac_socmel** · 22-06-2013, 21:23

sicuro di aver copiato bene?

**aramis81** · 23-06-2013, 15:17

Si, ho copiato bene. Mi crea il riquadro sul primo numero("01") e basta, non fa altro. Forse c'è qualcosa nel resto del codice della "mia" pagina che interferisce con il tuo codice. Però non so cosa!

Discussione: Come posso evidenziare il numero relativo all'immagine caricata?

Strumenti discussione

Ricerca discussione

Visualizza

Come posso evidenziare il numero relativo all'immagine caricata?

Permessi di invio