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 11 of 11

Thread: Image rollover

  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post

    Image rollover

    Hi. I have an image with a lot of words on it. When a word is rolled over, I want it to change colour. I had something working, but it required loading a new full image for each rollover, which made it slow. So I thought about trying a new version using 2 images. The initial image, and the image with the colours applied to each word. This way, I can just load both images at the start, and use css to show the coloured part of the second image when the word is rolled over.

    At the moment, I have (trying to get it working with one word first)
    Code:
    <ul id="background-type">
        <li id="panel1b"><a href="#1"></a></li>
    </ul>
    I then set the initial image on the background-type, and the rollover image on the anchor links to the panels. I then try using background position to show the correct part of the image
    Code:
    #background-type {
    	width: 960px;
    	height: 394px;
    	background: url(images/services/topImage.jpg);
    	margin: 10px auto;
    	padding: 0;
    	position: relative;
    }
    ul#background-type{
    	list-style: none;
    }
    #background-type li a {
    	background: url(images/services/topImage2.jpg);
    	position: absolute;
    	top: 0;
    	left:0;
    }
    #panel1b a:hover {
    	display:block;
        height: 139px !important;
        background-position: 9px 123px;
        width: 58px;
    }
    I know these are the right positions from the working version I had, but nothing happens with this one at the moment. Am I missing something, maybe I need to bring the rollover part of the image to the front or something?

    Any advice appreciate.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello nick2price,
    Without even looking at your code I can tell you that you can speed up your rollover by using sprites. Instead of 2 separate images, topImage and topImage2 would be combined into one image.
    That means the entire image would load when the page loads, the hovered image would already be there and waiting for the hover to show it.

    Look at a demo I have here.
    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:

    nick2price (04-05-2013)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post
    Hi, thanks for the reply. Thats what my second image basically is, a sprite sheet. Are you suggesting to put the second image under the first image to create a single image?

  • #4
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Do the words have to physically part of the image. I would expect not.

    An easier way to do this rather than have multiple images is to have just one image without any words on it as a "background". Then overlay the image using just html and css positioning with the words you want. You can use css to style the words how you like and :hover on the word containers to change the colour of the words when they are hovered on.

    The advantage of using this method is that you need only the original image and multiple images and if you want to change the words or their locations you don't have to go back to your image editing application to edit and create a new image. You just change the html/css which will be much quicker and easier.

  • #5
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    an example

    Code:
            <style type="text/css">
                #imgCont{
                    position: relative;
                    width: 300px;
                }
                #txt1{
                    position: absolute;
                    top: 50%;
                    left: 40%;
                }
                #img1{
                    width: 100%;
                }
                #txt1:hover {
                    color: red;
                }
            </style>
    Code:
    <div id="imgCont">
                <img id="img1" src="img1.jpg" alt="" />
                <div id="txt1">HELLO</div>
            </div>

  • Users who have thanked knightCoder for this post:

    nick2price (04-05-2013)

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post
    Thanks for the idea. I was initially thinking about doing something like this, but the image in question is way to complex to recreate using just css. Its not just a simple image with identical looking words on it, its way more complex than this :-)

  • #7
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    ok, in that case (it's a bit hard without seeing the actual image and words) perhaps you could still have just a wordless background image and then a separate pair of images just of the words for the mouse-on, mouse-off effects. Then you could use the same concept as in the code I posted.

    If you use multiple complete images, sprite or whatever, if you then ever wanted to change anything on the background part of the image then you will have to make the change on each of your multiple images which could be a real pita.

    Having a single bg image and pairs of images for the words should be easier to maintain/edit in the future, but as I said, it's hard to say for sure without seeing your image and words.

  • Users who have thanked knightCoder for this post:

    nick2price (04-06-2013)

  • #8
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Are you able to post one of the images or an image similar to what you will be using?

  • #9
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post
    No problem
    I uploaded the image here http://postimage.org/image/g7cb9zsd5/

    The top part is what displays normally, the bottom part contains all the rollover effects. So say if you hovered over AWAY DAYS, the orange AWAY DAYS would be displayed on the top part.

    Thanks

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by nick2price View Post
    No problem
    I uploaded the image here http://postimage.org/image/g7cb9zsd5/

    The top part is what displays normally, the bottom part contains all the rollover effects. So say if you hovered over AWAY DAYS, the orange AWAY DAYS would be displayed on the top part.

    Thanks
    The sprite image it would take to do that would be very large.
    It might be better just to hover a cropped slice of each orange text over an absolutely positioned anchor for each word or phrase. You could look into preloading the hovered images so they would be in the browser's cache on the local machine, that would do away with any wait time.
    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

  • #11
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    oh I see. That could be quite cumbersome to maintain since you have about 20 sets of words.

    But in any case, if it was me I would still try to use just html/css as per my earlier example for the words. You can style vertical text with css but I have never played with vertical text.

    My second option would be to have a separate pair of images for each set of words and use css positioning to place them as per your image and then use :hover to swap the images.

    My last resort would be to have pairs of complete images for each set of words.


  •  

    Posting Permissions

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