Log in

View Full Version : Links in banner


BloomFreak
03-25-2007, 03:56 AM
Dose any one know how to get links in my banner and get them to work. Like the way this site (http://orlando.britishstar.org/) has theirs. I cant figure it out and its driving me CRAZY!!! :mad: :mad: what would be the code for it?? I'm trying to do it with this banner (http://i15.photobucket.com/albums/a391/obgirlfriend1991/header.jpg)

PLEASE HELP!!
thetestingsite
03-25-2007, 04:57 AM
You would have to use an image map. I took the liberty of setting it up for you (getting the coordinates and such). Simply put this code where ever you want the header image to appear (Edit the code below to suit your needs).



<img src="header.jpg" usemap="#Map">


Then place this anywhere in the body of the page (will not be visible on the page):



<map name="Map">
<area shape="rect" coords="492,225,525,235" href="site.html" alt="Site">

<area shape="rect" coords="440,225,485,235" href="forum.html" alt="Forum">

<area shape="rect" coords="360,225,435,235" href="amusement.html" alt="Amusement">

<area shape="rect" coords="280,225,355,235" href="downloads.html" alt="Downloads">

<area shape="rect" coords="215,225,270,235" href="gallery.html" alt="Gallery">

<area shape="rect" coords="147,225,205,235" href="home.html" alt="Orlando">
</map>


Simply edit the parts in red above to point to your html files for each link. Hope this helps.
BloomFreak
03-25-2007, 05:32 PM
Thanks, do i have to change the coordinates every time i change my banner?? if so how do I know which ones to use?? :confused:
thetestingsite
03-25-2007, 05:36 PM
Use any image editting program to find the coordinates of where you want it the link to be. The first to are the x-y coordinates at the top left corner of the rectangle that the link will be, and the last two are the x-y coordinates for the bottom right corner. Hope this helps.
BloomFreak
03-25-2007, 06:00 PM
kind of :D lol
jscheuer1
03-25-2007, 06:31 PM
Here is a nice freeware program that is fairly easy to use and that takes the guesswork out of image maps:

http://www.stockholm.bonet.se/meracl/mimg.htm
BloomFreak
03-26-2007, 02:37 AM
that dont seem to help i still cant figure it out :(
jscheuer1
03-26-2007, 07:38 AM
Be a little patient and persistent. I count only 8 hours from my post offering the link to the program and your answer that you couldn't "figure it out". How much of that time did you actually spend with the program? 5 minutes?

I'd suggest reading the help info and a few 'dry runs' with it. I assure it is simple enough to get the hang of.
BloomFreak
03-26-2007, 06:42 PM
No i spent around about three or three and a half hours on it. I read the help. its its all confusing to me :(
jscheuer1
03-26-2007, 08:39 PM
Do you have any questions?
ozzgod
03-27-2007, 01:14 PM
Thank you, jscheuer1, for the link to the image map generator.

I found it extremely easy and fun to use.
BloomFreak
03-27-2007, 06:57 PM
I dont know how to use the generator :(
boxxertrumps
03-27-2007, 08:26 PM
Then read the tutorials on it and the help section.
BloomFreak
03-27-2007, 11:58 PM
I did but their confusing,
jscheuer1
03-28-2007, 02:40 AM
Well, we are all pulling for you, BloomFreak. Sometimes the best thing to do is just to play with a program. In this case, load an image into it and play with the controls. If you have any specific questions, we would be glad to do our best to answer them.
chechu
03-31-2007, 04:14 PM
Dear Bloom Freak
Use this site for the image mapping.
It seems to me it is the easiest online: http://www.pcoward.com/imagemapper/
Good luck !
killerchutney
03-31-2007, 07:39 PM
if you have dreamweaver 8, it has a tool where you can just draw the rectangle around the link.
BloomFreak
06-13-2007, 10:28 PM
I've messed around with it and I still can't figure it out. So can some one just help me with this?? I want the link to be where it says enter

http://img376.imageshack.us/img376/900/entersitebanner2vu5.th.gif (http://img376.imageshack.us/my.php?image=entersitebanner2vu5.gif)

Thanks
jscheuer1
06-14-2007, 03:37 AM
<img src="toxic_bloom.gif" width="600" height="420" usemap="#1" alt="" title="" border="0">
<map name="1">
<area shape="rect" coords="262, 377, 368, 407" href="#" alt="Toxic Bloom Enter" title="Toxic Bloom Enter">
<area shape="default" nohref>
</map>

Just change the # to the href for your link, and the image src attribute to the actual filename of the image. By the way, you would bet a better looking image at a smaller size if you have a copy of the original image in 16 million colors and save a copy of it as an optimized .jpg.
chechu
06-14-2007, 10:01 AM
Bloom Freak: hard to believe you couldn't work with this one:http://www.pcoward.com/imagemapper
Did you try it ? What was the problem ?
BloomFreak
06-14-2007, 08:09 PM
<img src="toxic_bloom.gif" width="600" height="420" usemap="#1" alt="" title="" border="0">
<map name="1">
<area shape="rect" coords="262, 377, 368, 407" href="#" alt="Toxic Bloom Enter" title="Toxic Bloom Enter">
<area shape="default" nohref>
</map>

Just change the # to the href for your link, and the image src attribute to the actual filename of the image. By the way, you would bet a better looking image at a smaller size if you have a copy of the original image in 16 million colors and save a copy of it as an optimized .jpg.
Thank you so much


Bloom Freak: hard to believe you couldn't work with this one:http://www.pcoward.com/imagemapper
Did you try it ? What was the problem ?
I dont know for some reason I just couldn't figure it out. A few times I thought I had but when I pasted the code it wouldn't work. Lol I guess I didn't do it right :confused: I dont know
BloomFreak
06-29-2007, 01:11 AM
Check it out I found another way to do it. :p And its alot easier for me to figure out :D

Past this code into a blank page and run your mouse over the parts you want to be links, and write down the numbers you see here (http://img245.imageshack.us/img245/7432/clipboard01tl7.jpg)


<A HREF=""><IMG SRC="IMAGE URL" ISMAP></A><!-- --><script type="text/javascript" src="/i.js"></script>
alexjewell
06-29-2007, 02:46 PM
do you want to put the source of i.js here too?
BloomFreak
07-04-2007, 01:54 AM
do you want to put the source of i.js here too?

:confused:
djr33
07-04-2007, 02:48 AM
i.js is the src (source) of that script. That's where all of the code is, not just that script tag.

<A HREF=""><IMG SRC="IMAGE URL" ISMAP></A><!-- --><script type="text/javascript" src="/i.js"></script>
BloomFreak
07-26-2007, 09:11 AM
Never mind I got it to work I just realized I can do this easily in ImageReady WOO
chechu
07-26-2007, 09:21 AM
Just go here and follow the steps.
http://www.pcoward.com/imagemapper/
BloomFreak
07-27-2007, 01:27 AM
Yes if you read my post above I said I figured out how to do it in ImageReady :p

but thanks