Making hover image position static

This is a discussion on "Making hover image position static" within the Web Page Design section. This forum, and the thread "Making hover image position static are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Jul 30th, 2007, 22:58
Junior Member
Join Date: Jul 2007
Location: United States of England
Age: 27
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Making hover image position static

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;
    }
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Jul 30th, 2007, 23:28
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Making hover image position static

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.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Jul 31st, 2007, 12:40
Junior Member
Join Date: Jul 2007
Location: United States of England
Age: 27
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Making hover image position static

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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Aug 2nd, 2007, 01:27
Junior Member
Join Date: Jul 2007
Location: United States of England
Age: 27
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Making hover image position static

bump
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
css, image position, static

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

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


All times are GMT. The time now is 18:42.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42