Image Mapping CSS in Invision

This is the footer for forum that I'll be going to use to. But I want to include the Facebook and Twitter links in the footer. So I tried Image Maps online for it and they had CSS Code..

These are the codes..

Code:

<style type="text/css">
   dl.image_map {display:block; width:800px; height:400px; background:url(http://i.imgur.com/aHKja.png); position:relative; margin:2px auto 2px auto;}
   a.LINK0 {left:79px; top:181px; background:transparent;}
   a.LINK0 {display:block; width:183px; height:0; padding-top:183px; overflow:hidden; position:absolute;}
   a.LINK0:hover  {background:transparent; border:1px dashed black; color:black;}
   a.LINK1 {left:309px; top:177px; background:transparent;}
   a.LINK1 {display:block; width:183px; height:0; padding-top:183px; overflow:hidden; position:absolute;}
   a.LINK1:hover  {background:transparent; border:1px dashed black; color:black;}
</style>

<dl class="image_map">
   <dd><a class="LINK0" title="JYWFB" href="http://facebook.com/JiyeonWorldwide"></a></dd>
   <dd><a class="LINK1" title="JYWTW" href="http://twitter.com/jiyeonfacts"></a></dd>
</dl>

         

After that, I put those above the gfooter codes..

Code:

#gfooter {
background-position: center;
background-repeat: no-repeat;
background-image: url("http://i.imgur.com/aHKja.png");
height:200px;
width:801px;
background-color: transparent;
}

and nothing happen and it says HTML cannot be use (yes I know, I removed the HTML codes... but still.. doesn't work. Anyone would like to help?

bump. please help.... ._________________.

Wouldn't it be more effective for you to create a widget instead and place it on the bottom right or left or upper part so it'll be easier to see instead of having your guests or members scroll down just to see it?

Hmm .. I don't know.. but it would be better using the image as footer..

Well, I only know how to put a background for footer, but I have no idea how to put a link to over lay it with...

Bumping in her stead as well.

bump. omg please help ;___________;

First lets explain one thing. CSS will not allow you to do what you are looking for. What you would need to do is use javascript/jQuery (same thing just written differently) to create your image map (which involves HTML5 ) and invision does not allow template editing.

This would be the html you would need:

Code:

<img src="trees.gif" usemap="#green" border="0">
<map name="green">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
<area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>

That is what you call an img map.

Not sure on how to write that code. maybe a

Code:

$(document).ready(function(){
$(#footer).html('<img src="trees.gif" usemap="#green" border="0">
<map name="green">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
<area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>');
});

You would of course have to change #footer with where your image is located. Then place the image url in where tree.gif is. Change your map name and change the coords="" and the href codes.

If you still haven't understand what next said, you can give him the option of letting him have a test admin account (Through PM) so he can assist you IF he'd like that .

I don't mind, Ive done it so much lol. Helped quite a few users. Though if you would like for me to help, I'd also advise you to follow through in my help chat. So that you can understand the process, so you are not clueless if you want to change it later and what not.

I don't understand... help? ._.

nextlevelgaming wrote:I don't mind, Ive done it so much lol. Helped quite a few users. Though if you would like for me to help, I'd also advise you to follow through in my help chat. So that you can understand the process, so you are not clueless if you want to change it later and what not.

Well, like he said, you could just pm him about it, lol.

Your code is located here

http://easybbtutorials.forumotion.com/t56-code-for-image-mapping-user#127

With a working example. Thank you