Making hover image position static

plato · #1 Jul 30th, 2007, 22:58

I was attempting my own version of this css image switcher: http://www.andyrutledge.com/cssslides.html

Where on hover a small image appears on the page. I have manged to create the hover effect and the images load fine but the thing I cant work out is how to make them load in the exact same place every time even with the window resized.

My HTML

Code: Select all

      <div id="gallicon">&nbsp;</div>
      <div id="gallselect">
    <ul>
        <li id="exterior"><a href="#" title="exterior">Exterior</a><ul><li><img src="gallery/icons/ext.png" alt="External Icon" /></li>
        </ul>
        </li>
        <li id="interior"><a href="#" title="interior">Interior</a><ul><li><img src="gallery/icons/int.png" alt="Internal Icon" /></li>
        </ul>
        </li>
        <li id="partybus"><a href="#" title="partybus">Party Bus</a><ul><li><img src="gallery/icons/partb2.png" alt="Party Bus Icon" /></li>
        </ul>
        </li>
        <li id="southas"><a href="#" title="southas">SA</a><ul><li><img src="gallery/icons/sas.png" alt="SA Icon" /></li>
        </ul>
        </li>
    </ul>
    </div>

My CSS Code snippet if it helps at all

Code: Select all

#gallicon {
    width: 200px;
    height: 150px;
    background: url(blankholder.png) no-repeat top left;
    clear: both;
    }
    
#gallselect {
    clear: both;
    }

#gallselect ul {
    list-style: none;
    line-height: 40px; 
    font-weight: bold;
    font-size: 12px;
}

#gallselect li {
    float: left;
    background: transparent;
    }

#gallselect li a {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    width:100px;
    line-height: 40px;
    display: block;
    text-decoration: none;
    text-align: center;
}

#gallselect ul li a:hover {
    color: #fff;
    background: #000;
}

#gallselect li ul {
    position:absolute; 
    top:-5000px
}

#gallselect li li {
    width: 200px;
}

li#exterior:hover ul {
    position:absolute;  
    left: 650px;
    top: 360px;
    width: 200px;
    height: 150px;
    }

li#interior:hover ul {
    position:absolute;  
    left: 650px;
    top: 360px;
    }

li#partybus:hover ul {
    left: 650px;
    top: 360px;
    }

li#southas:hover ul {
    position:absolute; 
    left: 650px;
    top: 360px;
    }

Lchad · #2 Jul 30th, 2007, 23:28

This is the css code for Son Spring Hover Gallery

Code: Select all

.hoverbox
{
    cursor: default;
    list-style: none;
}

.hoverbox a
{
    cursor: default;
}

.hoverbox a .preview
{
    display: none;
}

.hoverbox a:hover .preview
{
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
}

.hoverbox img
{
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    padding: 2px;
    vertical-align: top;
    width: 150px;
    height: 113px;
}

.hoverbox li
{
    background: #eee;
    border-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    display: inline;
    float: left;
    margin-top: 3px;
    margin-right: 10px;
    margin-left: 15px;
    margin-bottom: 3px;
    padding: 5px;
    position: relative;
}

.hoverbox .preview
{
    border-color: #000;
    width: 325px;
    height: 244px;
}

Maybe this will help you.

The bit in green is actually the code for the hover image.

plato · #3 Jul 31st, 2007, 12:40

I gave some of those settings a go but they still dont seem to solve the problem. When I resize the browser window the location of the hovering image relative to the text moves moves and I am wanting it to be in the same location no matter the size of the browser window.

From the first example I posted it seems like the CSS was supposed to load the hovering image within a pre-defined DIV but I dont know if thats possible and if it is I wouldnt know how to do it! :S

plato · #4 Aug 2nd, 2007, 01:27

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
info window pop-up on mouse-over of static JPG image	aldernon	JavaScript Forum	1	May 25th, 2008 22:28
swap more than 1 image on hover	apos	JavaScript Forum	2	May 9th, 2007 17:12
Image - Expand on Hover	beso	Flash & Multimedia Forum	16	Oct 7th, 2006 06:02
a:hover and background-position issue with ie6	mezema	Web Page Design	5	Jun 15th, 2006 15:32
hover image repeating on me	hessodreamy	Web Page Design	1	Dec 7th, 2005 13:41

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Making hover image position static