Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2012
    Location
    UK, England
    Posts
    11
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Mouseover image + thumbnail showing together at the same time

    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

  • #2
    New Coder
    Join Date
    Jan 2012
    Location
    UK, England
    Posts
    11
    Thanks
    6
    Thanked 0 Times in 0 Posts

    IE Fix

    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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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. That's a good example there.

    Your code with some unneccesary things removed -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Pamster (02-10-2012)

  • #4
    New Coder
    Join Date
    Jan 2012
    Location
    UK, England
    Posts
    11
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #5
    New Coder
    Join Date
    Jan 2012
    Location
    UK, England
    Posts
    11
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

    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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Pamster View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Pamster (02-10-2012)

  • #7
    New Coder
    Join Date
    Jan 2012
    Location
    UK, England
    Posts
    11
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Pamster View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Jan 2012
    Location
    UK, England
    Posts
    11
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Thumbs up

    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •