...

View Full Version : Mouseover image + thumbnail showing together at the same time



Pamster
02-10-2012, 01:14 PM
Hi

I am new to web building - I thought I had a eureka moment yesterday after days of searching....however the code works looking at it in 'live' view in Dreamweaver but it doesn't work when I view the website for real.

I have a series of thumbnails - and a series of larger images. I want the user to mouseover and get a larger view (simple!). But when you view the website the thumbnail AND the mouseover are showing at the same time, all the time.

CSS Code
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}


PHP index page
<a class="thumbnail" href="thumb"><img src="small_image.jpg" style="width:180px; height:150px; border:0;" /><span><img src="large_image.jpg" /><br /></span></a>

Thanks for any assistance

Pamster
02-10-2012, 05:16 PM
Hi

Okay, still messing about with the code above....it works in other browsers - but not in IE.

Does anyone know the 'fix' for this - your help really appricated
With Thanks

Excavator
02-10-2012, 05:41 PM
Good morning Pamster,
I can't seem to recreate your problem, your code works for me. Tested in FF10, IE9-7

What you're doing is called a disjointed rollover (http://nopeople.com/CSS%20tips/disjointed_rollover/index.html). That's a good example there.

Your code with some unneccesary things removed -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
}
#container {
width: 800px;
margin: 30px auto;
padding: 20px 20px 300px;
background: #999;
}
.thumbnail {
position: relative;
z-index: 0;
}
.thumbnail:hover {
background-color: transparent;
z-index: 50;
}
.thumbnail span { /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img { /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span { /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
</head>
<body>
<div id="container">
<a class="thumbnail">
<img src="small_image.jpg" width="180" height="150" alt="description" />
<span><img src="large_image.jpg" alt="description" width="800" height="600" /></span>
</a>
<a class="thumbnail" href="thumb"><img src="small_image.jpg" style="width:180px; height:150px; border:0;" /><span><img src="large_image.jpg" /><br /></span></a>
<!--end container--></div>
</body>
</html>

Pamster
02-10-2012, 07:35 PM
Hi Excavator

Thanx for taking a look at it for me.....Good 'Evening' by the way - as I am all the way in the UK!

I have a query, if you dont mind. I have put the CSS code on a separate page. And also, because my index page has a hit counter that is a php page. Will this have any affect on viewing the page in IE, as you said it worked when you tried it. I have viewed in Firefox and it works great. Hope this doesn't sound too 'stupid' a question, just new at this.

Thanx very much

Pamster
02-10-2012, 07:48 PM
Wierd.......

OK - I came out of IE altogether - then went back into it and typed in my web address.....it now works on the index page (yay) BUT (this is the wierd bit!) on my gallery page (which works on FireFox) the mouseover images have dissapeared so all I have are the thumbnails and I have no idea why.

I have seen that some people really dont seem to like IE - does it operate in such a random manner, or is there a Gremlin in my computer :confused:

Aside from that - the other issue, I can now see is the mouseover images are all formatted the same way - which is great for pics at the top/middle of the screen and on the left hand side - but anything at the bottom or right hand side is only showing a partial image - I know the CSS said .thumbnail: hoverspan: left (so I know the code is correct) - but is there an easy way of displaying the images that are only partial or do I have to create a second set of CSS that hover spans to the right?

Thanx so much for your help

Excavator
02-10-2012, 08:26 PM
Wierd.......

OK - I came out of IE altogether - then went back into it and typed in my web address.....it now works on the index page (yay) BUT (this is the wierd bit!) on my gallery page (which works on FireFox) the mouseover images have dissapeared so all I have are the thumbnails and I have no idea why.


Sometimes IE keeps a cache of the page longer than other browsers, you may just need to clear the cache before you see the most current version of your code.

To see why your hovered images are not showing up, we just about need a link to the test site.

Pamster
02-10-2012, 08:40 PM
Sometimes IE keeps a cache of the page longer than other browsers, you may just need to clear the cache before you see the most current version of your code.


Thank you.....although I was coming out of the page in IE, it wasn't until I completely came out of it again, was I able to see the mouseover. Will remember if it works in other browsers to come out of IE 'several' times before I suspect a problem.

Are you able to help me with a quick fix on the code - to display the images I can not see fully - Thank you so much.

Excavator
02-10-2012, 09:09 PM
Are you able to help me with a quick fix on the code - to display the images I can not see fully - Thank you so much.

Probably? We'd really need to see the most current version and the images...that's why I suggested linking us to the test site.

Pamster
02-10-2012, 11:28 PM
Hi Excavator

For getting back to me.....I managed to sort it out. Not sure if I have followed the correct procedure, as I am a novice - but the following works in several browsers. I love it as it is only html and CSS, because at the moment my head has enough 'new' stuff to learn without including other coding techniques.

I have changed the following:

Orginal Code
.thumbnail:hover span { /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

Revised Code
.thumbnail:hover span { /*CSS for enlarged image on hover*/
visibility: visible;
bottom: 0;
left: 60px; /*position where enlarged image should offset horizontally */

This meant - that I can see all the images accross the bottom of the screen as they have been lifted up and the images at the top show over the logo across the top, so they have room to be seen.

Regarding the images that were on the right hand side - I just copied and pasted all the CSS code and then on the copy added _right onto it. It was only the hover:span and span that needed to be amended from left to right. Then in the HTML just amended the images to the right of the screen to include the _right. (see below)

Additional code used

/*CSS Right hand view*/

.thumbnail_right{
position: relative;
z-index: 0;
}

.thumbnail_right:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail_right span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
right: -1000px;
border: 1px gray double;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail_right span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail_right:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
bottom: 0;
right: 60px; /*position where enlarged image should offset horizontally */
}



The HTML in my php page for the images on the right now looks the same as before, with just the _right added :

<a class="thumbnail_right" href="thumb"><img src="small_image.jpg" style="width:180px; height:150px; border:0;" /><span><img src="large_image.jpg" /><br /></span></a>

Totally appricate that you dont need to know this - and really appricate your help this evening - have posted this explaination, in case anyone else has the same issue, so it maybe able to help someone.

Thanks once again :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum