Jul 26, 2008

Best Way For Role-over Images?

Free Web Hosting, No Ads > CONTRIBUTE > The Internet > Web Design

free web hosting

Best Way For Role-over Images?

paulmason411
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.frusciante.trap17.com/slices/coded.html
CSS: http://www.frusciante.trap17.com/slices/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 tongue.gif

 

 

 


Reply

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

http://www.websiteoptimization.com/services/analyze/

Reply

Saint_Michael
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.

CODE

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
CODE

<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



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Similar Topics

Keywords : role, images

  1. Getting Flash Images On A Site
    (1)
  2. Hoverbox Image Gallery
    a pretty cool way to present Images on a page (1)
    Hoverbox is an Image Gallery which I found some time ago. The feature I like the most about it is
    the effect of the "on-hover" state which changes the image from a small thumbnail size to a
    "mid-size" image. Essentially, it doubles the size of the picture when your mouse hovers on it. The
    Hoverbox uses CSS for the size change and needs no javascript to perform. In fact, it works the same
    without javascript. And... it apparently works in IE. The CSS method used includes 'hiding'
    the larger image until the 'on-hover' state is reached. As you know, IE&#....
  3. Activation Code Images, How?
    need help with activation code images (3)
    hi everbody, I am creating this website for an online game KHAN which is of course hosted by
    Trap17.com. Anyway, it accepts membership since its services includes message board for every member
    and message board for groups that members created and of course personal messages. So here is my
    problem, since it accepts membership it requires applicants to fill up forms which ask their e-mail
    address, I want to know how make an activation code that is an image. Get my point? /smile.gif'
    border='0' style='vertical-align:middle' alt='smile.gif' /> it is basically like her....
  4. Oscommerce Images?
    (4)
    Does anyone know where I can find some really good oscommerce replacement images? The ones that
    come with the program don't fit in with my store. I found a contribution that gets rid of them,
    but I am looking for some cool images to replace them with. I'm also looking for them in pink
    preferrably, but I can always change the color in photoshop. Also, for anyone who wants to know,
    I found a cool program that lets you generate oscommerce buttons to fit the color pallete of your
    store at http://oscommerce-buttons.org/ Well back to the grind. Hopefully my st....
  5. Pre Load Images
    (12)
    I want to preload some images with my page and after searching in google I found this code but it
    doesn't seem to work. Cany anyone tell me what is wrong? <script language="JavaScript">
    <!-- Image1= new Image() Image1.src = "Slice3_over.gif" Image2 = new Image() Image2.src
    = "Slice4_over.gif" Image3 = new Image() Image3.src = "Slice5_over.gif" Image3 = new Image()
    Image3.src = "Slice6_over.gif" --> ....
  6. Great Background Images
    Don't miss them! (1)
    Here it is: http://home.arcor.de/stefun132/Hintergrund/ ....
  7. Great Background Images
    Don't miss them! (2)
    Here it is: http://home.arcor.de/stefun132/Hintergrund/ ....
  8. How Do I Embed Scripts Into Images?
    (7)
    I've always wondered but I never really knew how.......
  9. 1000 Free Psd Icon Images
    They are very cool (10)
    Here it is: CODE http://www.stud.uni-hannover.de/~ngthanh/1000_ico/page_01.htm
    http://www.stud.uni-hannover.de/~ngthanh/1000_ico/page_02.htm
    http://www.stud.uni-hannover.de/~ngthanh/1000_ico/page_03.htm
    http://www.stud.uni-hannover.de/~ngthanh/1000_ico/page_04.htm
    http://www.stud.uni-hannover.de/~ngthanh/1000_ico/page_05.htm Carpe diem.....
  10. Cropped Thumnail Images?
    newbie.. (0)
    Is there software that will allow you to crop images when you make a have a lot of pics that's
    different sizes? I only use Frontpage & whenever I auto thumbnail images that are different
    sizes..they come out looking very disorganized. I've seen on some sites where they're able
    to make thumbnails all the same size & the thumbnail is not the entire pic, but rather the central
    focus..for example the thumbnail just shows the head, while the actual picture is a view of the
    entire body.....

    1. Looking for role, images

Searching Video's for role, images
advertisement



Best Way For Role-over Images?



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE