Image mapping. |
 Jul 30 2009, 03:57 PM
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
|
|
|
|
 |
Replies
|
Jul 31 2009, 12:09 AM
Post
#2
|
|
|
Funride.org Group: Member Posts: 326 Joined: Jul 2007 Member No: 542,299 |
Okay I made another layout but only one of my image maps is working the media one.
Can someone help. CODE <html>
<title>Selena Gomez</title> <style type="text/css"> body{background-color: #000000; background-image:url(http://funride.org/apbackground.png); background-image: repeat; color: #000000; font-family: arial; text-transform: none; font-size: 9px; } #maincontent{ position: absolute; overflow: hidden; top: 300px; left: 290px; width: 425px} #navcolumn{ position: absolute; overflow: hidden; top: 0px; left: 735px; width: 143px} 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: 8B5ECB !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:#FFFFFF;} a.navi:hover{ font-family: arial; font-weight:normal; font-size: 8px; letter-spacing:1px; text-transform: uppercase; letter-spacing:0px; color:#A1FD44; border-left: 3px solid #A1FD44; } </style> <html> <img src="http://funride.org/aplayout.png" usemap="#avrilpedia" border="0" alt="" style="position:absolute; top:0px; left:0px;" /> <map name="avrilpedia"> <area shape="rect" alt="Home" coords="360,396,444,431" href="http://yoursite.com" target="_self"> <area shape="rect" alt="Avril" coords="450,397,530,434" href="http://yoursite.com" target="_self"> <area shape="rect" alt="WWW\Online" coords="537,397,713,434" href="http://yoursite.com" target="_self"> <area shape="rect" alt="Media" coords="718,396,806,434" href="http://yoursite.com" target="_self"> / </map> <div id="maincontent"> <h1>Layout info</h1> This layout took me from the time I woke up (12:00 PM) to 6:05 PM.<br> So basically ALL of my day. I would appreciate if you left the sidebar credit on, though its not necescarry.<br> Now the history:<br><br> I started this design yesterday (July 29, 2009) but many failed attempts to coloring, coding and image mapping.<br I decided to take a break and start in the morning.<br> So even before I started designing about an hour was spent on cB looking for tutorials.<Br><Br> I decided to do Selena because, well I dont know.<br><br> Just enjoy the layout<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> Image Mapping: <a href="http://funride.org" class="navi">Here </a>|<a href="http://tcunningham.createblog.com" class="navi"> Here</a><br> Photo: <a href="http://selenaweb.org" class="navi">Here</a><br> DO NOT REMOVE! <br> <br> </div> </html> |
|
|
|
Posts in this topic
5stardesigns Image mapping. Jul 30 2009, 03:57 PM
tcunningham You don't close an img with a "/>... Jul 30 2009, 04:13 PM
Mike QUOTE(tcunningham @ Jul 30 2009, 10:13 PM... Jul 30 2009, 05:23 PM tcunningham QUOTE(Mike @ Jul 30 2009, 06:23 PM) http:... Jul 30 2009, 05:28 PM 5stardesigns It's still not working.
Heres my code now.CODE... Jul 30 2009, 04:22 PM tcunningham Hm, okay, I got it working here,
http://www.avier... Jul 30 2009, 05:00 PM tcunningham Oh, how embarrassing. I must have read the code in... Jul 30 2009, 05:39 PM 5stardesigns Now the image map works it's just that it isnt... Jul 30 2009, 05:41 PM Mike Look for this bit here:
CODE<img src="htt... Jul 30 2009, 05:43 PM 5stardesigns ^Yeah when you posted that is when I remembered t... Jul 30 2009, 05:48 PM tcunningham You had a div that was covering the other parts of... Jul 31 2009, 12:27 AM 5stardesigns Thank you, I didn't know that mattered. Jul 31 2009, 12:31 AM tcunningham Yes. Even though you have a clear background on th... Jul 31 2009, 12:33 AM emberfly omg problem solved!
http://www.isdntek.com/t... Jul 31 2009, 12:42 AM tcunningham QUOTE(emberfly @ Jul 31 2009, 01:42 AM) o... Jul 31 2009, 12:59 AM 5stardesigns ^Yup! Jul 31 2009, 10:52 AM schizo Closed and moved to Resolved. Jul 31 2009, 11:11 AM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: