The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Image Mapping CSS in Invision

View previous topic View next topic Go down

Image Mapping CSS in Invision

Post by maijiyeon on November 15th 2012, 4:34 pm



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

maijiyeon
Forumember

Female Posts : 145
Reputation : 3
Language : Ipoh
Location : T-ara KPOP

http://jiyeonworldwide.forumtl.com/

Back to top Go down

Re: Image Mapping CSS in Invision

Post by maijiyeon on November 16th 2012, 10:47 am

bump. please help.... ._________________.

maijiyeon
Forumember

Female Posts : 145
Reputation : 3
Language : Ipoh
Location : T-ara KPOP

http://jiyeonworldwide.forumtl.com/

Back to top Go down

Re: Image Mapping CSS in Invision

Post by Kaizer Lee on November 16th 2012, 3:43 pm

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?

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Re: Image Mapping CSS in Invision

Post by maijiyeon on November 16th 2012, 5:35 pm

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

maijiyeon
Forumember

Female Posts : 145
Reputation : 3
Language : Ipoh
Location : T-ara KPOP

http://jiyeonworldwide.forumtl.com/

Back to top Go down

Re: Image Mapping CSS in Invision

Post by Kaizer Lee on November 17th 2012, 4:46 am

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.

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Re: Image Mapping CSS in Invision

Post by maijiyeon on November 18th 2012, 6:24 am

bump. omg please help ;___________;

maijiyeon
Forumember

Female Posts : 145
Reputation : 3
Language : Ipoh
Location : T-ara KPOP

http://jiyeonworldwide.forumtl.com/

Back to top Go down

Re: Image Mapping CSS in Invision

Post by nextlevelgaming on November 18th 2012, 7:58 am

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.


Last edited by nextlevelgaming on November 18th 2012, 8:01 am; edited 1 time in total (Reason for editing : Fixed the js file)

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Re: Image Mapping CSS in Invision

Post by Kaizer Lee on November 18th 2012, 8:52 am

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

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Re: Image Mapping CSS in Invision

Post by nextlevelgaming on November 18th 2012, 8:37 pm

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.

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Re: Image Mapping CSS in Invision

Post by maijiyeon on November 22nd 2012, 6:34 am

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

maijiyeon
Forumember

Female Posts : 145
Reputation : 3
Language : Ipoh
Location : T-ara KPOP

http://jiyeonworldwide.forumtl.com/

Back to top Go down

Re: Image Mapping CSS in Invision

Post by Kaizer Lee on November 22nd 2012, 9:26 am

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

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Re: Image Mapping CSS in Invision

Post by nextlevelgaming on November 23rd 2012, 9:41 pm

Your code is located here

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

With a working example. Thank you

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum