Image mapping. |
Image mapping. |
![]()
Post
#1
|
|
![]() Funride.org ![]() ![]() ![]() ![]() ![]() Group: Member Posts: 326 Joined: Jul 2007 Member No: 542,299 ![]() |
I'm using the tutorial Erin (theerinkal) sumbitted.
But it isnt working here is my code can someone help me? CODE <title>Avril Lavigne - The Best Damn Thing</title>
<html> <style type="text/css"> body{background-color: #000000; background-image:url(http://funride.org/selenagomezbackground.png); background-image: repeat; color: #000000; font-family: arial; text-transform: none; font-size: 9px; } #maincontent{ position: absolute; overflow: hidden; top: 425px; left: 285px; width: 285px} #navcolumn{ position: absolute; overflow: hidden; top: 423px; left: 575px; width: 175px} textarea{ background-color: #000000; border: 1px dotted #ffffff; width: 88px; height: 50px; letter-spacing: 0px; text-transform: uppercase; font-family: small fonts; color: #ffffff; font-size: 9px;} h1{ width: 100%; padding: 5px; margin-bottom: 3px; background-color: 000000 !important; color: ffffff !important; font-family: arial; font-size: 8pt; font-weight: none; text-align: left; line-height: 8pt; text-transform: uppercase; float: left; margin-left: 0px;} h2{ width: 100%; padding: 5px; margin-bottom: 3px; background-color: 000000 !important; color: 774362 !important; font-family: arial; font-size: 8pt; font-weight: none; text-align: left; line-height: 8pt; text-transform: uppercase; float: left; margin-left: 0px;} #banner{ position: absolute; top: 0px; left: 0px; width: 1000px} #content h1 { margin-left: 0px; text-align: left; } #content p { margin-left: 0px; width: 300px; } a.navi, a.navi:active, a.navi:link, a.navi:visited{ font-family: arial; font-weight:normal; font-size: 8px; text-transform: uppercase; letter-spacing:0px; color:#000000;} a.navi:hover{ font-family: arial; font-weight:normal; font-size: 8px; letter-spacing:1px; text-transform: uppercase; letter-spacing:0px; color:#774362; border-left: 3px solid #774362; } </style> <img src="http://funride.org/selenagomez copy.png" width="1024" height="768" border="0" usemap="#map" /> <map name="map"> <!-- #$VERSION:2.3 --> <!-- #$AUTHOR:Owner --> <area shape="rect" coords="282,255,400,302" alt="Home" href="#" /> <area shape="rect" coords="403,256,586,303" alt="Content" href="#" /> <area shape="rect" coords="590,255,726,303" alt="Credit" href="http://funride.org" /> </map> <div id="banner"> <img src="http://funride.org/selenagomez copy.png"> </div> <div id="maincontent"> <h1>Layout info</h1> This layout is of Avril Lavigne, my favorite singer!<Br> Photos: I blured, soft light and sharpened all of the photos.<br> Then placed/blended them.<br> And on a new layer I add the flowers.<br><br> Coding: The coding was from our current Funride Layout of David Henrie.<Br> <Br><br> Please do not remove out credit.<br> We spent a lot of time on the layout.<br><br> Also if you would like more or request a layout e-mail us at nick@funride.org<br><br> Enjoy the layout! :D<br> </div> <div id="navcolumn"> <h2>Navigation</h2> <a href="#" class="navi">link</a><br> <a href="#" class="navi">link</a><br> <a href="#" class="navi">domain</a><Br> <h2>Navigation</h2> <a href="#" class="navi">link</a><br> <a href="#" class="navi">link</a><br> <a href="#" class="navi">domain</a><Br> <h2>Navigation</h2> <a href="#" class="navi">link</a><br> <a href="#" class="navi">link</a><br> <a href="#" class="navi">domain</a><Br> <h2>Navigation</h2> <a href="#" class="navi">link</a><br> <a href="#" class="navi">link</a><br> <a href="#" class="navi">domain</a><Br> <h2>Credit</h2> Layout: <a href="http://funride.org" class="navi">Here</a><br> Photo: <a href="http://sweetandtalented.com" class="navi">Here</a><br> DO NOT REMOVE! <br> <br> </div> </html>
Reason for edit: Please use [codebox] tags instead of [code] tags when posting longer codes. - Mike
|
|
|
![]() |
![]()
Post
#2
|
|
![]() Live long and prosper. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Staff Alumni Posts: 10,142 Joined: Apr 2007 Member No: 514,926 ![]() |
Yes. Even though you have a clear background on the div, it's still in front of the imagemap. You can't walk through walls, you can't go through layers.
|
|
|
![]() ![]() |