Jump to content

Posting img title in a div


advanzd
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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 by advanzd
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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 :P
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...