Posting img title in a div

[advanzd]

Well here's my problem. I'm making a image gallery and i have a script that enlarges a thumbnail when clicked (and a little part of it is used to have a image chang on mouseover, not really important), which looks like this:

function Large(obj){    var imgbox=document.getElementById("imgbox");    imgbox.style.visibility='visible';var info=document.getElementById("info");    info.style.visibility='visible';    var img = document.createElement("img");       img.src=obj.src;    img.style.width='700px';    img.style.height='auto';       if(img.addEventListener){	    img.addEventListener('click',Out,false);    } else {	    img.attachEvent('onclick',Out);    }			    imgbox.innerHTML='<div style="float:right;z-index:99;"><img id="close" alt = "image" src = "images/close2.png" onmouseover = "this.src = Image_over.src;" onmouseout = "this.src = Image_out.src;" onClick="Out()" /></div>';       imgbox.appendChild(img);      imgbox.style.left=(getElementLeft(obj)) +'px';    imgbox.style.top=(getElementTop(obj)) + 'px'; } function Out(){    document.getElementById("imgbox").style.visibility='hidden';    document.getElementById("info").style.visibility='hidden';}var Image_over = new Image();var Image_out = new Image();function Preload(){if (document.images){// set image urlImage_over.src = "images/close.png";Image_out .src = "images/close2.png";}}

And what i want to do, is whenever a thumbnail gets clicked, the title of the thumbnail must be placed in a div called "info" as text. I've found a code on w3schools that's capable of writing a title, but i don't know how to make it write the title of the clicked thumb in the div i want. So here's the code to write a title:

<script type="text/javascript">var x=document.getElementsByTagName('body')[0];document.write("Body title: " + x.title);document.write("<br />");document.write("An alternate way: ");document.write(document.getElementById('myid').title);</script>

I'm hoping someone can help me out!

[eTianbun]

EX:

function getTitle(e){document.getElementById('info').innerHTML=e.title;}

<img src='image.png' onclick="getTitle(this)"/>

Edited May 10, 2012 by eTianbun

[advanzd]

EX:

 function getTitle(e) {document.getElementById('info').innerHTML=e.title;}

 <img src='image.png' onclick="getTitle(this)"/> 

doesn't work

[dsonesuk]

Well it would help if it HAD a actual title to retrieve, just a suggestion but i think its pretty valid.

[eTianbun]

Well it would help if it HAD a actual title to retrieve, just a suggestion but i think its pretty valid.

Yep, i forgot that...

<img src='image.gif' title='My image' onclick='getTitle(this)'/>

Edited May 10, 2012 by eTianbun

[advanzd]

Could i place the

{document.getElementById('info').innerHTML=e.title;}

inside the

function Large(obj){	var imgbox=document.getElementById("imgbox");	imgbox.style.visibility='visible';var info=document.getElementById("info");	info.style.visibility='visible';	var img = document.createElement("img");  	img.src=obj.src;	img.style.width='700px';	img.style.height='auto';   	if(img.addEventListener){			img.addEventListener('click',Out,false);	} else {			img.attachEvent('onclick',Out);	}				  	imgbox.innerHTML='<div style="float:right;z-index:99;"><img id="close" alt = "image" src = "images/close2.png" onmouseover = "this.src = Image_over.src;" onmouseout = "this.src = Image_out.src;" onClick="Out()" /></div>';  	imgbox.appendChild(img);  	imgbox.style.left=(getElementLeft(obj)) +'px';	imgbox.style.top=(getElementTop(obj)) + 'px';  } 

?and if i could, how?

Edited May 10, 2012 by advanzd

[eTianbun]

No, let it be in it own function (getTitle)!UPDATE:Well, it is possible though, but maybe its going to make the code complicated for you. Just seperate it for NOW!

Edited May 10, 2012 by eTianbun

[advanzd]

No, let it be in it own function (getTitle)!UPDATE:Well, it is possible though, but maybe its going to make the code complicated for you. Just seperate it for NOW!

but that'll mean i need 2 onClick attributes in one img tag :S

[eTianbun]

onclick="Large(obj); getTitle(this)"

It is better this way.

Edited May 10, 2012 by eTianbun

[dsonesuk]

function Large(obj)	{	var imgbox=document.getElementById("imgbox");	imgbox.style.visibility='visible';	var info=document.getElementById("info");	if(obj.title)		{		info.innerHTML= obj.title;		}	else		{		info.innerHTML= obj.src;		}	info.style.visibility='visible';	var img = document.createElement("img");  	img.src=obj.src;	img.style.width='700px';	img.style.height='auto';   	if(img.addEventListener)		{		img.addEventListener('click',Out,false);		} else {		img.attachEvent('onclick',Out);		}				    	imgbox.innerHTML='<div style="float:right;z-index:99;"><img id="close" alt = "image" src = "../images/close2.png" onmouseover = "this.src = Image_over.src;" onmouseout = "this.src = Image_out.src;" onClick="Out()" /></div>';  	imgbox.appendChild(img);	imgbox.style.left=(getElementLeft(obj)) +'px';	imgbox.style.top=(getElementTop(obj)) + 'px';	} 

Oh yea! I'm presuming the thumbnails had <img src='image.gif' title='My image' onclick='Large(this)'/>

Edited May 10, 2012 by dsonesuk

[advanzd]

function Large(obj)	{	var imgbox=document.getElementById("imgbox");	imgbox.style.visibility='visible';	var info=document.getElementById("info");	if(obj.title)		{		info.innerHTML= obj.title;		}	else		{		info.innerHTML= obj.src;		}	info.style.visibility='visible';	var img = document.createElement("img");  	img.src=obj.src;	img.style.width='700px';	img.style.height='auto';   	if(img.addEventListener)		{		img.addEventListener('click',Out,false);		} else {		img.attachEvent('onclick',Out);		}				    	imgbox.innerHTML='<div style="float:right;z-index:99;"><img id="close" alt = "image" src = "../images/close2.png" onmouseover = "this.src = Image_over.src;" onmouseout = "this.src = Image_out.src;" onClick="Out()" /></div>';  	imgbox.appendChild(img);	imgbox.style.left=(getElementLeft(obj)) +'px';	imgbox.style.top=(getElementTop(obj)) + 'px';	} 

Oh yea! I'm presuming the thumbnails had <img src='image.gif' title='My image' onclick='Large(this)'/>

yeah they have