javascript richiamare una funzione() nel codice in innerHTML

**jabjoint** · 18-09-2008, 10:16

Ciao a tutti, stavo cercando di creare una galleria immagini in javascript.

Il funzionamento della galleria dovrebbe essere il seguente:

Cliccando su un link di un menu:

1) creare gli elementi "img" relativi al link con l' innerHTML:
2) fare in modo che al click di ogni elemento creato corrisponda una funzione specifica.

CODICE JAVASCRIPT:

var iw=document.getElementById("imageview")
iw.innerHTML="";
iw.style.display="block";//mostra il contenitore degli elementi

for(var i=0;i<=0;i++){
var val = 'img/img/'+ i +'.jpg'; //percorso dell' immagine ingrandita

// inserisci all' interno del' img creata il collegamento alla funzione
var href_ = 'href="javascript:' + "ViewSingle('"+ val +"');"
var str_='<a '+ href_ +';">'+

//creazione degli elementi:
'<img alt="' + i + '" title="' + i + '" src="img/'+ i +

'.jpg" height="100px" width="100px">' + '</img></a>';

iw.innerHTML+=str_;
}

}

function ViewSingle() {

//qui c' è il codice che avvia la funzione per mostrare la singola immagine grande
alert('prova funzione');

}

Il problema è che la lista delle immagini piccole viene creata però quando clicco sull' immagine non mi mostra quella più grande nonostante sia evidenziata dal collegamento.
La funzione infatti non viene richiamata...

Spero qualcuno sappia suggerirmi dove sbaglio.

**artorius** · 18-09-2008, 10:27

perché usi l'innerHTML, questo funziona solo con FF ed Opera, come ho simpaticamente scoperto a mie spese... devi usare le funzioni DOM per la creazione degli element ed associarci gli eventi tramite le funzioni DOM1 style:

es.

Codice PHP:


var val = 'img/img/'+ i +'.jpg';

var a  = document.createElement('a');

a.href = val;

a.onclick = function(){

   ViewSingle(this.href);

   return void(0);

};



var img = document.createElement('img');

img.src = 'img/'+i+'jpg';

img.alt = i;

img.title = i;



a.appendChild(img);



iw.appendChild(a);

Sostituisci il contenuto del for con questo e dovrebbe andare.

**jabjoint** · 18-09-2008, 11:43

**artorius** · 18-09-2008, 11:49

il sito è raggiungibile, che gli do un'occhiata?

**jabjoint** · 18-09-2008, 12:03

no hai ragione il codice funziona... c' è un' anomalia che non riesco a spiegarmi però, e che mi ha fatto credere che non andava:

infatti gli elementi creati nella prima riga non richiamano alcuna funzione mentre tutti quelli delle righe successive invece aprono correttamente la funzione richiamata???

**artorius** · 18-09-2008, 12:05

Guarda che javascript non funziona a volte, posta il codice HTML

**jabjoint** · 18-09-2008, 12:05

se vuoi ti mando la pagina via mail

**artorius** · 18-09-2008, 12:09

postalo...

**jabjoint** · 18-09-2008, 12:23

Qui c' è l' intera pagina:

-HTML-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Menu</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<link rel="stylesheet" type="text/css" href="jsmenu.css">
<link rel="stylesheet" type="text/css" href="menu.css">

<script type="text/javascript" src="expand.js"></script>
<script type="text/javascript" src="viewimage.js"></script>
</head>
<body>

<div id="nav">
<ul>[*]<h2>Album Immagini</h2>[*]<h3>Viaggio</h3>
<ul>[*]Parigi

<div id="menu2">
<ul>
[*]Città
<ul>
[*]Tour Eiffel
[*]Place de la concorde
[*]La senne
[*]Palazzi
[*]Statue
[/list]

[*]Museo: Ouvre
<ul>
[*]Statue
[*]Tele
[/list]

[*]Museo: Orsay
<ul>
[*]Statue
[*]Tele
[/list]

[/list]
</div>
[*]Vienna
<div id="menu2">
<ul>
[*]Città
<ul>
[*]Palazzi
[*]Statue
[*]Chiese
[/list]

[*]Link B2
<ul>
[*]Link B2-1
[*]Link B2-2
[*]Link B2-3
[/list]

[/list]
</div>
[*]Praga
<div id="menu2">
<ul>
[*]Città
<ul>
[*]Palazzi
[*]Statue
[*]Chiese
[/list]

[*]Link B2
<ul>
[*]Link B2-1
[*]Link B2-2
[*]Link B2-3
[/list]

[/list]
</div>
[*]Bratislava

<div id="menu2">
<ul>
[*]Città
<ul>
[*]Palazzi
[*]Statue
[*]Chiese
[/list]

[*]Link B2
<ul>
[*]Link B2-1
[*]Link B2-2
[*]Link B2-3
[/list]

[/list]
</div>
[*]Madrid

<div id="menu2">
<ul>
[*]Città
<ul>
[*]Palazzi
[*]Statue
[*]Chiese
[/list]

[*]Musei
<ul>
[*]Link B2-1
[*]Link B2-2
[*]Link B2-3
[/list]

[/list]
</div>
[*]-----------

<div id="menu2">
<ul>
[*]Città
<ul>
[*]Palazzi
[*]Statue
[*]Chiese
[/list]

[*]---------
<ul>
[*]-----
[*]------
[/list]

[*]--------

[/list]
</div>
[/list]
[*]<h3>Disegni</h3>
<ul>[*]Ritratti[*]Schizzi[*]Dipinti[/list]
[/list]
</div>

<div id="imagesingle">[img][/img]</img></div>
<div id="imageview"></div>

</body>
</html>

javascript view image

// JavaScript Document

function ViewImage(){
var iw=document.getElementById("imageview")

iw.style.display="block";

for(var i=0;i<=15;i++){
var val = 'img/img/'+ i +'.jpg';

var a = document.createElement('a');
//a.href = val;
a.onclick = function(){
ViewSingle(val);
return void(0);
};

var img = document.createElement('img');
img.src = 'img/'+i+'.jpg';
img.alt = i;
img.title = i;
img.style.height='100px';
img.style.width='100px';

a.appendChild(img);

iw.appendChild(a);

}//for

}//funzione

function ViewSingle(pName){
var iw=document.getElementById("imageview")
iw.style.display="none";

var is=document.getElementById("imagesingle")
var img = is.getElementsByTagName("img");
is.style.display="block";
img[0].src=pName;
img[0].style.height="100%";
img[0].style.width="100%";

}

javascript menu espandibile

/*javascript per menu espandibile*/

window.onload=function(){
if(document.getElementsByTagName && document.getElementById){
document.getElementById("nav").className="jsenable ";
BuildList();
}
}

function BuildList(){
var hs=document.getElementById("nav").getElementsByTag Name("h3");
for(var i=0;i<hs.length;i++){
hs[i].onclick=function(){
if (this.parentNode.tagName == "LI") {
this.parentNode.className=(this.parentNode.classNa me=="show") ? "hide" : "show";
}
}
}
}

MENU.CSS

/*css del menu*/
body {background-image:url(file:///C|/Users/Corrado/Desktop/puzzle/bg2.jpg);}
div#nav{width:170px;margin-left: 20px; background-image:url(bg1.jpg);
border: 1px solid #00005A; font: 11px Arial, Helvetica, sans-serif; z-index:0;}
div#nav h3{font-size: 100%;margin: 0;padding: 4px 10px;
border-top: 1px solid #FFF;color: #000;background-color: #66CCCC}
div#nav h2{ margin-top:8px; margin-bottom:8px; }
div#nav h2 a:hover{color:#000}
div#nav h2 a{ background-image:url(tessuto.jpg); color:#333300;
height:auto; text-align:center; font-variant:small-caps; }
div#nav ul,div#nav li{margin: 0;padding: 0;list-style-type: none}
div#nav li{margin: 0 0 1px 0;}
div#nav a{display: block;padding-left: 15px;height: 18px;line-height: 18px;
border-top: 1px solid #FFF;background-color: #BDBDBD;color: #000;
text-decoration: none;font-weight: bold}
div#nav a:hover{color: #FFFFFF; background-color:#000;}
div#nav ul ul a{color: #333; background-color: #33CC00;font-weight: normal}
div#nav h3:hover{background-color: #003366; color:#FFFFCC; text-align:right}
div#nav h3{ height:18px;}

div#nav ul h3{ border-left:1px ridge #666666; border-right:1px ridge #666666;
border-top:2px ridge #003366; border-bottom:2px ridge #003366}

div#nav ul h3:hover{ border-top:2px ridge #fff; border-bottom:2px ridge #fff;}

div#nav ul ul li{ border-top:1px inset #FF9900}
div#nav ul ul li:hover{ border:0px; }

/*menu2*/

div#nav ul ul li:hover #menu2 { display:block; }

#menu2{
position:relative;
float:left;
top:-20px;
left:171px;
margin:0;
padding:0;
display:none;

}
#menu2 ul{
position: absolute;
left:0px;
top:0px;
padding:0px;
margin:0px;
}
#menu2 li{
position: relative;
float:left;
left:0px;
top:0px;
list-style: none;
margin:0;
padding:0;
}
#menu2 li a{
width:120px;
height: 25px;
display: block;
text-decoration:none;
text-align: center;
line-height: 20px;
font-weight: bold;
font-size: 10px;
}
#menu2 li a:hover{
background-position:bottom center;
}
#menu2 ul ul{
position: absolute;
top: 0px;
left:135px;
width: 120px;
visibility: hidden;
}
#menu2 ul li:hover ul {
visibility:visible;
}

#menu2 a.yellow{
background-color:#FFFF00
}
#menu2 a.orange{
background-color:#FFCC00
}
#menu2 a.blue{
background-color:#66CCFF
}

/*imageview*/
div#imageview { position:absolute; background-color:#006666; border:2px double #FFFFCC;
left:220px; top:100px; height:400px; width:750px; z-index:-1; display:none;}

div#imagesingle { position:absolute; background-color:#fff; border:2px double #FFFFCC;
left:240px; top:100px; height:400px; width:650px; z-index:-1; display:none;}

**artorius** · 18-09-2008, 13:09

scusa, ma se ti posto un codice, mi dici perché lo cambi?

var a = document.createElement('a');
//a.href = val;
a.onclick = function(){
ViewSingle(val);
return void(0);
};

deve essere

var a = document.createElement('a');
a.href = val;
a.onclick = function(){
ViewSingle(this.href);
return void(0);
};

Altrimenti lo scope dell'evento causa il malfunzionamento dello stesso.

Discussione: javascript richiamare una funzione() nel codice in innerHTML

Strumenti discussione

Ricerca discussione

Visualizza

javascript richiamare una funzione() nel codice in innerHTML

Permessi di invio