Megerish ([info]mana_goddess) wrote in [info]s2styles,
@ 2008-02-11 12:48:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
Image Maps
Is there a way to code one into an S2 layout without having a paid account?

[This is my one beef with S2!]

(Post a new comment)


[info]babyelefant
2008-02-13 06:35 pm UTC (link)
If you use an S2 style with a freetextbox taht you don't need you can do it.

Just stick the imagemap coding in the freetext box, and move it where you want with CSS

(Reply to this) (Thread)

[info]mana_goddess
2008-02-13 07:05 pm UTC (link)
Thank you!

If you know any examples of this (or a tutorial or something) that I could look at the source code of that would be amazing. I wouldn't know how to do it off-hand.

Thank you so much though! I've been looking for a way to do this.

(Reply to this) (Parent)(Thread)

[info]babyelefant
2008-02-14 08:11 am UTC (link)
No, not at the moment. I once did it for someone with Smooth Sailing. I'll see if I can still find the code when I get home from work

(Reply to this) (Parent)

[info]babyelefant
2008-02-14 10:28 am UTC (link)
I was bored and did it with your layout here: [info]testing_l4lj
I added
<img src="http://img.photobucket.com/albums/v617/mana_goddess/TLKBirdsLayoutDRAFTsmall2-1.png" width="1082" border="0" usemap="#imap" class="imagemap">
<map id="imap" name="imap" >
<area shape="rect" coords="158,504,307,534" alt="Recent" title="Recent" href="http://mana-goddess.livejournal.com/">
<area shape="rect" coords="343,504,492,534" alt="Friends" title="Friends" href="http://mana-goddess.livejournal.com/friends">
<area shape="rect" coords="547,504,703,534" alt="Calendar" title="Calendar" href="http://mana-goddess.livejournal.com/calendar">
<area shape="rect" coords="747,504,914,534" alt="Profile" title="Profile" href="http://mana-goddess.livejournal.com/profile">
</map>


in the blurb box and the used this CSS to move the map where I want it:

.imagemap {
position:absolute;
top:0px;
width:1082px;
left:50%;
margin-left:-541px;
}

I had to move #content down afterwards, but it works. The links are now the words under the image

(Reply to this) (Parent)(Thread)

[info]mana_goddess
2008-02-14 12:20 pm UTC (link)
Dude. Omg. You're amazing. Has anyone told you that before? Because you are.

You totally went above and beyond, thanks so much for all of your help!!

(Reply to this) (Parent)(Thread)

[info]babyelefant
2008-02-14 12:40 pm UTC (link)
*blushes*
Thank you :)

So do you understand what I did there?

(Reply to this) (Parent)(Thread)

[info]mana_goddess
2008-02-14 06:42 pm UTC (link)
Yeah, I'm pretty sure I got it. Won't have a chance to try it out for a couple of days but it doesn't look too complicated.

(Reply to this) (Parent)(Thread)

[info]babyelefant
2008-02-14 06:50 pm UTC (link)
It really isn't :)

(Reply to this) (Parent)(Thread)

[info]loves3tulsaboyz
2008-03-10 04:59 am UTC (link)
I'm sorry to barge in, but I'm trying to do the same thing and I'm completely lost. What's a blurb box and is it the same thing as freetext box? Ugh, it's driving me mad! I'm about damn ready to redesign the whole layout NOT using image maps!!!

(Reply to this) (Parent)(Thread)

[info]babyelefant
2008-03-10 08:05 am UTC (link)
Jup blurb = freetext

(Reply to this) (Parent)(Thread)

[info]loves3tulsaboyz
2008-03-11 04:09 am UTC (link)
I'm sorry, but I don't know what jup blurb is...can you explain please?

(Reply to this) (Parent)(Thread)

[info]babyelefant
2008-03-11 08:23 am UTC (link)
Jup means Yes and I wanted to say, that the blub bux is the same as a freetest box. In some styles it is called blurb

(Reply to this) (Parent)(Thread)

[info]loves3tulsaboyz
2008-03-11 07:04 pm UTC (link)
God, you must think I'm absolutely retarded. I'm sorry, but I still don't know what it is. Maybe because my style doesn't have one? I'm using smooth sailing. Is that perhaps why? I'm so sorry to keep bugging you.

(Reply to this) (Parent)(Thread)

[info]babyelefant
2008-03-11 07:12 pm UTC (link)
Smooth Sailing has several Freetext boxes, but you are not using Smooth Sailing

(Reply to this) (Parent)(Thread)

[info]loves3tulsaboyz
2008-03-11 11:23 pm UTC (link)
I'm actually using it on a community so I don't mess up my own stuff when doing the code. Sorry about that! it's at [info]sykin

(Reply to this) (Parent)

[info]loves3tulsaboyz
2008-03-11 11:33 pm UTC (link)
So now I'm wondering. freetext boxes....are they the extra fields you can enter info in when customizing? The only thing I enter anything into is the Custom CSS box. Is that what you guys are referring to? Wow - I feel really stupid right now...

(Reply to this) (Parent)(Thread)

[info]babyelefant
2008-03-12 07:55 am UTC (link)
Yers, the freetext boxes are the ones under Sidebar, the ones you can add extra info in

(Reply to this) (Parent)(Thread)

[info]loves3tulsaboyz
2008-03-12 06:57 pm UTC (link)
oh my god - I feel like a fool. I didn't even know that existed! Thank you so much!!!

(Reply to this) (Parent)

[info]thylaslain
2008-04-19 01:58 am UTC (link)
Heey, I'm currently having the same problem...
So, i put that in the blurb box?

I did, and then i tried to put the image map, but it just didn't work out...nothing happens. :(
what am I doing wrong?
I'm using flexible squares.

(Reply to this) (Parent)(Thread)

[info]babyelefant
2008-04-19 08:13 am UTC (link)
Yes, in the blurb box, but it can't work for you. You don't have a sidebar and that way the blurb box doesn't work

(Reply to this) (Parent)(Thread)

[info]thylaslain
2008-04-19 04:55 pm UTC (link)
I see. Guess I'm gonna have to switch to smooth sailing.
Thanks!!!
:)

(Reply to this) (Parent)

[info]kentucka
2008-04-21 09:02 pm UTC (link)
I guess one would be able to get this working if one set the sidebar to display, then disabled everything BUT the blurb.
and then added some more creative CSS to hide the sidebar, and only keep the imagemap...

.) shift down the #content by adding a margin-top with the height of the image map picture to stop the overlapping
.) set #sidebar to width: 0px; and border-width: 0px; (to hide the sidebar box)
.) set li.sbartitle to display: none; (to hide the Blurb box title)
.) make #maincontent expand all the way to the right/left again, by adding margin-right: 0px; or margin-left: 0px;

mostly, this should even work in IE6. I just tried it on a default Flexible Squares layout, and it didn't look too messed up.

(Reply to this) (Parent)(Thread)

[info]babyelefant
2008-04-22 07:27 am UTC (link)
Yes it does work that way, I did it too once. But it is a lot of work to get it right if I remember correctly

(Reply to this) (Parent)

Create an Account
Forgot your login or password?
Login w/ OpenID
English • Español • Deutsch • Русский…