New layout |
Resource Center Links
This Month's Contests | Hosts Looking for Hostees | Hostees looking for Hosts | BigBookofResources
Submission Guidelines
 Jul 14 2007, 11:34 AM
Post
#1
|
|
|
Senior Member  Group: Member Posts: 65 Joined: Sep 2006 Member No: 468,685  |
It was the first time using image maps for me=]
i might use it for my top 8 aswell. but can someone help me? for some reason is has a scrollbar on the main page but there is nothing underneath the image. www.myspace.com/wrighty55 |
|
|
|
 |
Replies
|
Jul 25 2007, 02:45 PM
Post
#2
|
|
|
Senior Member Group: Member Posts: 174 Joined: Apr 2007 Member No: 517,502 |
Finally found it!! Sorry it's kinda grave digging but I think you could use this, the only thing I would add to it is preload code for all the hover states, do this by simply adding all the hover states to a div and use CSS "visibility: hidden;" or "display: none;".
I'm extremely tired so do excuse if I don't make perfect sense just now. Obviously you'd use properly fitting rollover states, this is just an example. But yea, there it is :D RAR'd HTML Sheet: http://www.fileden.com/files/2007/4/14/984...lover_test1.rar Source: CODE <style type="text/css"> body { background-color: FFFFFF; margin: 0; padding: 0; } .hiddenPic {display: none;} a#left_stick:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); } a#right_stick:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); } a#dpad:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); } a#x_button:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); } a#b_button:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); } a#y_button:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); } a#a_button:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); } a#guide:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); } a#back:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); } a#start:hover { background-image: url(http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg); } #book { background-image: url(http://www.gadgetsandgames.co.uk/images/xbox360controller.jpg); position: absolute; top: 75px; left: 50%; margin-left: -263px; width: 526px; height: 374px; } #menu a { position: absolute; height: 37px; width: 37px; top: 81px; left: 400px; text-decoration: none; } #menu a i { visibility: hidden; } a#left_stick { left: 65px; top: 65px; width: 69px; height: 65px; } a#right_stick { left: 305px; top: 161px; width: 65px; height: 65px; } a#dpad { left: 133px; top: 152px; width: 89px; height: 89px; } a#x_button { left: 357px; } a#b_button { left: 440px; } a#y_button { top: 40px; } a#a_button { top: 123px; } a#guide { left: 235px; top: 78px; width: 52px; height: 52px; } a#back { left: 191px; top: 93px; width: 28px; height: 23px; } a#start { left: 303px; top: 93px; width: 28px; height: 23px; } </style> <body> <div id="book"> <div id="menu"> <a href="lstick.html" id="left_stick"><i>Left Stick</i></a> <a href="rstick.html" id="right_stick"><i>Right Stick</i></a> <a href="dpad.html" id="dpad"><i>D-Pad</i></a> <a href="x.html" id="x_button"><i>X</i></a> <a href="b.html" id="b_button"><i>B</i></a> <a href="y.html" id="y_button"><i>Y</i></a> <a href="a.html" id="a_button"><i>A</i></a> <a href="guide.html" id="guide"><i>Guide</i></a> <a href="back.html" id="back"><i>Back</i></a> <a href="start.html" id="start"><i>Start</i></a> <img src="http://img34.exs.cx/img34/9881/HaloLegendaryLogo.jpg" alt="rollover" title="rollover" height="50" width="50" class="hiddenPic"> </div> </div> </body> </html> :D |
|
|
|
Posts in this topic
mattwright55 New layout Jul 14 2007, 11:34 AM
xTHExDUDEx Fantastic, I really like this.
Nice colours, origi... Jul 14 2007, 12:10 PM mattwright55 Haha thanks i did center it, thats the first time ... Jul 14 2007, 12:39 PM xTHExDUDEx Aha, I'm glad you asked, I discovered how to d... Jul 14 2007, 01:05 PM mattwright55 Thanks i'll take a look then i'll test it ... Jul 14 2007, 01:08 PM yobaka3 I love how one of your favorite things is subway a... Jul 14 2007, 02:33 PM
mattwright55 QUOTE(yobaka3 @ Jul 14 2007, 08:33 PM) I ... Jul 14 2007, 02:37 PM LovelyObsession the page is soo awsome
ii just added u =] Jul 14 2007, 02:33 PM _cheekz_ i really like it but the top8 imagemap doesnt work... Jul 14 2007, 02:59 PM mattwright55 I haven't put a top 8 image map in yet :) Jul 14 2007, 04:43 PM Frankie good job image mapping.
that was such a bitch for ... Jul 14 2007, 07:33 PM mattwright55 I added a image map to the top 8, still struggling... Jul 15 2007, 03:58 AM xTHExDUDEx Lookin good.
If you're still having problems i... Jul 15 2007, 11:51 AM mattwright55 Yeh that'll be great:)
Thanks. Jul 15 2007, 11:52 AM xTHExDUDEx No worries, I'll have a root about for it late... Jul 15 2007, 11:58 AM mattwright55 Ok cheers mate
in the mean time i will keep findin... Jul 15 2007, 12:03 PM laxumaster8 i like red Jul 25 2007, 02:55 PM Relentless It looks great! I love how the layout is a ... Jul 26 2007, 12:48 AM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: