Forums > Image mapping.

Forums > Resource Center > Graphics Help > Graphics Help Resolved Topics

funride

Jul 30 2009, 03:57 PM

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>

tcunningham

Jul 30 2009, 04:13 PM

You don't close an img with a "/>"

this is my tutorial:
http://www.createblog.com/all-other-tutori...rial-for-paint/

you can just direct yourself to the bottom right, since you got the coords figured out already.

funride

Jul 30 2009, 04:22 PM

It's still not working.
Heres my code now.

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" usemap="#selenagomez copy">
<map name="selenagomez copy">
<area shape="rect" alt="Home" coords="282,255,400,302" href="http://yoursite.com" target="self">
<area shape="rect" alt="Content" coords="403,256,586,303" href="http://yoursite.com" target="self">
<area shape="rect" alt="Credit" coords="590,255,726,303" href="http://funride.org" target="self">
</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>

tcunningham

Jul 30 2009, 05:00 PM

Hm, okay, I got it working here,
http://www.avierspiel.net/avril

But there are A LOT of coding errors. You shouldn't put images with spaces, it just creates errors. if they do have a space, insert %20 instead of the space. I think that you should learn how to write HTML before jumping into making a layout.

Mike

Jul 30 2009, 05:23 PM

QUOTE(tcunningham @ Jul 30 2009, 10:13 PM)

You don't close an img with a "/>"

http://createblog.com/forums/index.php?sho...t&p=3225888

tcunningham

Jul 30 2009, 05:28 PM

QUOTE(Mike @ Jul 30 2009, 06:23 PM)

http://createblog.com/forums/index.php?sho...t&p=3225888

Well, that's the way that I was taught. Plus, fix the errors, and magically the image map works.

Mike

Jul 30 2009, 05:32 PM

I was talking about this bit here:

QUOTE

The slash in <br /> is because it's an empty element, like <img /> or <link /> or <input />. Without the slash, it's like using <div> but never using </div>. That said, you can also use <br></br> or <img></img> and it will still validate.

Or else an open <img> tag will also count as an error. Js, since you prefer to follow the W3C Validator.

tcunningham

Jul 30 2009, 05:39 PM

Oh, how embarrassing. I must have read the code incorrectly in my initial response to this topic. What matters is that the image map with the original coding, didn't work. Now it is working. I'm not sure which fix I made, that had it start working, and when I say errors, here, I was talking about actual errors, not validation errors.

funride

Jul 30 2009, 05:41 PM

Now the image map works it's just that it isnt positioned correctly.
What should I do.
Is it my resolution (1024x768)?

CODE

<title>Avril Lavigne - The Best Damn Thing</title>

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

<html>

<img src="http://funride.org/selenagomez%20copy.png" usemap="#selenagomez_copy">
<map name="selenagomez_copy">

<area shape="rect" alt="Home" coords="282,255,400,302" href="http://yoursite.com" target="_self">
<area shape="rect" alt="Content" coords="403,256,586,303" href="http://yoursite.com" target="_self">
<area shape="rect" alt="Credit" coords="590,255,726,303" href="http://funride.org" target="_self">
/
</map>

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

Thank uou, I'll remember that.

Mike

Jul 30 2009, 05:43 PM

Look for this bit here:

CODE

Replace it with this:

CODE

See if it goes where you want it to.

funride

Jul 30 2009, 05:48 PM

^Yeah when you posted that is when I remembered to do that.
haha

funride

Jul 31 2009, 12:09 AM

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>

tcunningham

Jul 31 2009, 12:27 AM

You had a div that was covering the other parts of the image map. I altered your top and left positioning on those divs (content and nav)

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: 450px;
left: 200px;
width: 425px}

#navcolumn{
position: absolute;
overflow: hidden;
top: 450px;
left: 650px;
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>

funride

Jul 31 2009, 12:31 AM

Thank you, I didn't know that mattered.

tcunningham

Jul 31 2009, 12:33 AM

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.

emberfly

Jul 31 2009, 12:42 AM

omg problem solved!

http://www.isdntek.com/tagbot/imap.htm

yey?

tcunningham

Jul 31 2009, 12:59 AM

QUOTE(emberfly @ Jul 31 2009, 01:42 AM)

omg problem solved!
http://www.isdntek.com/tagbot/imap.htm
yey?

Nah, he already had the code, it just wasn't working with the rest of his coding.

Mike

Jul 31 2009, 10:30 AM

Is this good for closing then?

funride

Jul 31 2009, 10:52 AM

^Yup!

schizo

Jul 31 2009, 11:11 AM

Closed and moved to Resolved.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.