CSS Gallery Persistence?

[TheJoshMan]

1) Script Title: CSS Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...gallery/#thumb

3) Describe problem: Not a problem YET per se, just curious as to whether or not this could be implemented in such a way that each larger image and description would stay put once the thumbnail is clicked. Is it possible to make it so that once someone clicks the thumbnail the enlarged <span> containing the larger image and description would stay in place until another thumbnail was hovered over?

Just curious. Thanks.

[rangana]

Apparently, there's no easy way to do this via CSS alone, but with JS, might be possible.

See post # 4 for possibility.

[TheJoshMan]

Oops! I guess I thanked too soon! LOL
Yes, I was quite expecting it to have to be done via javascript... I just wasn't quite sure how or IF it was actually possible.

[rangana]

How about giving me a chance to give you these steps:

• Try to add this element in your markup
  

  <div id="hold"></div>

• Add this in your CSS:
  

  #hold{
  position: absolute;
  padding: 5px;
  left: 240px;
  color: black;
  text-decoration: none;
  z-index:10000;
  }

• Have this script:
  

  <script type="text/javascript">
  window.onload=function(){
  for(var i=0,a=document.getElementsByTagName('a');i<a.length;i++)
  	{
  	if(a[i].className=='thumbnail'){
  		a[i].onclick=function(){
  			var hold=document.getElementById('hold');
  			hold.innerHTML=this.getElementsByTagName('span')[0].innerHTML;
  			hold.style.background='lightyellow';
  			hold.style.border='1px dashed gray';
  			return false;
  			}
  		a[i].onmouseover=function(){
  		document.getElementById('hold').innerHTML='';
  		hold.style.background='none';
  		hold.style.border='0px';
  		}
  		}
  	}
  }
  </script>

• and have some beer

See the mess.

[TheJoshMan]

muy bueno senor... Very much appreciated. Works like a charm. Thank you very much.

[student101]

Originally Posted by rangana

How about giving me a chance to give you these steps:

This has helped, but need to change it back to the default when mouse-out or mouse-off.

If this was the contact us page then the default image would be ;
<div id="hold"><img src="img/contactus.jpg" /><br />Contact us.</div>
You mouse-over to see other images when you mouse-out it resets to the default image.

Do I add;
a[i].onmouseout=function(){

Is there a method to show the default image of that page?

Edit:
Solved with javascript;
==
function showIt(imgsrc){
document.getElementById('imgshow').src=imgsrc;
}

function hideIt(){
document.getElementById('imgshow').src="images/contact.jpg";
}
==

Thanks, cheers.