Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
* * * * * 1 votes

Best Way For Role-over Images?


2 replies to this topic

#1 paulmason411

    Member [Level 1]

  • Kontributors
  • PipPipPipPip
  • 69 posts

Posted 04 December 2006 - 07:08 AM

Hi Guys,

I'm trying to work out the best way to make this site.

This is what I have made so far using CSS, divs, and spans:
Site: http://www.frusciant...ices/coded.html
CSS: http://www.frusciant...lices/style.css

I found a problem with this attempt when you resize the browser window all the images move with it.
Any suggestions on how to fix this?

So basically what i want to be able to do with this is have those buttons light up some how when i roll over them. My idea was to have each button on a fairly small image, that way you don't have to reload a huge image each time you roll over a button. This is the reason i split it up like this.

I was wondering, would it be easier to use CSS layers and put the roll-over image over the top of the original one each time someone rolls over it. I would use image maps for this.

If anyone has ideas on how to do this in a simpler way I would really appreciate it. Cheers :)

Edited by paulmason411, 04 December 2006 - 07:09 AM.


#2 jlhaslip

    Insert Custom Title Here

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,040 posts
  • Gender:Not Telling
  • Location:Linux, DOS and Windows…the good, the bad and the ugly
  • myCENT:81.07
  • Spam Patrol

Posted 04 December 2006 - 07:24 AM

Site is pretty full already. About the last thing it needs is another set of images.

http://www.websiteop...rvices/analyze/

#3 Saint_Michael

    $p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 7,459 posts
  • Gender:Male
  • Location:9r33|\| 399$ 4|\|D 5P4/\/\
  • Interests:$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
  • myCENT:71.24

Posted 04 December 2006 - 09:20 AM

Yes that would be the way to go since it will reduce the amount of images you would need to just the hovers.

This is were you would go to set it up.
http://www.yourtotalsite.com/archives/xhtm...ps/Default.aspx


Now their is one reason why the images breaks up like that. First you do have your body set up properly you do this by setting this up in your css file.

html, body{ 
 margin:0; 
 padding:0; 
 text-align:left;

} 
 
#wrapper { 
 width:980px; 
 text-align:left;
 margin: 0 auto;
 border:solid 0px;

}

then you would insert that wapper as such
<div class="wrapper">

by the looks of it you want your wrapper set at 1024px and leave your height blank. The reason I use 1024 is due to the fact that that browser setting is where your image format is doing what it is supposed to.

Hopefully that helps out.




Reply to this topic


This post will need approval from a moderator before this post is shown.

  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users