Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Image showing when hover over thumbnail , not when thumbnail is clicked

  • 17-06-2009 11:50am
    #1
    SD1990
    Registered Users Posts: 242 ✭✭


    Hi all,


    I have a CSS based gallery on a site i am doing and there is 10 thumbnails. When you hover over one of the thumbnails the picture is enlarged next to them. That all works fine. What i am trying to do is add an on click function that when you click the thumbnail that image stays displayed ( there is no image displayer when you are not hovering over a thumbnail )

    Here is the code i have at the moment.

    HTML 
    <a class="thumbnail" ><img src="bed1.jpg" width="100px" height="66px" name="pic1" border="0" /><span><img src="bed1.jpg" /><br />description</span></a>
 
<a class="thumbnail" href="#thumb"><img src="bed2.jpg" width="100px" height="66px" border="0" /><span><img src="bed2.jpg" /><br />description</span></a>
<br />
    etc.

    I am thinking something like onClick="showImage(document.getElementByName('pic1').src);" ?

    here is the CSS code 
    .gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1500px;
border: 1px dashed gray;
color: black;
text-decoration: none;
visibility: visible;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 25px;
left: 270px; /*position where enlarged image should offset horizontally */
z-index: 50;
}


Comments

  • #2
    Hydrosylator
    Closed Accounts Posts: 275 ✭✭Hydrosylator


    I don't know much about Javascript, but I know what I like.
    Floatbox will do what you want to do and then some, and also it's very tweakable.

    I used it on my sisters photography website and it worked a treat.

    I'm assuming you want to do something like this, though I could be wrong.

    Also, it's worth bearing in mind that the :hover pseudo-class won't work for anything other than a link for most versions of Internet Explorer.


  • #3
    SD1990
    Registered Users Posts: 242 ✭✭SD1990


    Thanks for reply.

    But all i need is a small javascript fix to fix this problem.

    A simple onclick function. But being clueless at javascript i cant work it out myself :o


  • #4
    ron_darrell
    Users Awaiting Email Confirmation Posts: 351 ✭✭ron_darrell


    Ok this isn't exactly what you're looking for but with a little tweaking it should work ok.
    <html>
<head>
<script>
	var cur_pic = "";
	var stay = false;
	var old_pic = "";
	
	function hover_pic(obj) {
		var tn_patt = /\/tn/;
		if(obj != null) {
			var my_path = obj.src;
			my_path = my_path.replace(tn_patt, "");
			cur_pic = my_path;
			document.getElementById('demo_window').innerHTML = "<img src='"+my_path+"' width='200' height='200' />";
		} else {
			if(old_pic.length > 0) {
				document.getElementById('demo_window').innerHTML = "<img src='"+old_pic+"' width='200' height='200' />";
			} else {
				document.getElementById('demo_window').innerHTML = "";
			}
		}
	}
	
	function stay_pic(obj) {
		var my_path = obj.src;
		var tn_patt = /\/tn/;
		my_path = my_path.replace(tn_patt, "");
		cur_pic = my_path;
		old_pic = my_path;
		document.getElementById('demo_window').innerHTML = "<img src='"+my_path+"' width='200' height='200' />";
	}
</script>
<style>
	.demo {
		width:		400px;
		height: 	400px;
		float:		left;
	}
</style>
</head>
<body>
<div id="demo_window" class="demo"></div>
<img src="img/tn/test1.jpg" width="100" height="100" onmouseout="hover_pic(null);" onmouseover="hover_pic(this);" onclick="stay_pic(this);" /><br />
<img src="img/tn/test2.jpg" width="100" height="100" onmouseout="hover_pic(null);" onmouseover="hover_pic(this);" onclick="stay_pic(this);" /><br />
<img src="img/tn/test3.jpg" width="100" height="100" onmouseout="hover_pic(null);" onmouseover="hover_pic(this);" onclick="stay_pic(this);" /><br />
<img src="img/tn/test4.jpg" width="100" height="100" onmouseout="hover_pic(null);" onmouseover="hover_pic(this);" onclick="stay_pic(this);" /><br />
<br/>
</body>
</html>

    Enjoy.

    RD


  • #5
    SD1990
    Registered Users Posts: 242 ✭✭SD1990


    http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

    Thats where i got it from.

    Want to click on the thumbnail and that image to stay up.

    Any help appriciated.

    Total javascript noob so trying to avoid that.


  • #6
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    SD1990 wrote: »
    http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

    Thats where i got it from.

    Want to click on the thumbnail and that image to stay up.

    Any help appriciated.

    Total javascript noob so trying to avoid that.

    It's using the css :hover pseudo class, which - based on it's name - is only applicable to hover.

    Maybe some form of :active or :visited might work instead, but TBH that's killing the whole point of that gallery.

    Since you're a newbie, maybe try one of the jQuery out-of-the-box extensions like lightbox instead ?


  • Advertisement
Advertisement