hotspot question

@nabiloseMar 15.2003

it sounds a rookie question but… , well i have problem with hotspot on my image, i have my image se at 100% so it can shrink or stretch depending on the screen resolution and i have placed a hotspots in it, but whenever the window or resolution change the hotspots take completely different positions and all is messed up, is ther any solution for that can i place hotspots in an absolute position so they can shrink and strech too with the image and keep their right places???

to post a comment

HTML

17 Comments(s) _↴

@NedalsMar 16.2003 — #Food for thought: - I'm not sure if this will work, but here goes.

Create a <div> that floats above your image. This div will contain a 'matrix' of transparant images, also sized relatively. These could then be used for your hot spots.

@nabiloseauthorMar 17.2003 — #thanks guys but none of those solutions worked? any other solution please

@NedalsMar 17.2003 — #Post a link or supply a sample of your page code (attach the image). We can take a better look and maybe propose something.

@nabiloseauthorMar 17.2003 — #ok the website is [URL=http://www.xmeninformer.com]xmeninformer[/URL] , u can see the nav bar in the right but i dont really know how to put hotspots in there as the imgae shrink and strecth as the resolution changes , thanks

@NedalsMar 17.2003 — #There's no 'nav bar' on the right. Do you mean the 'Home' .... 'Donate' nav bar on the left which appears to be one large image? If so, then break up the image into its individual components and make those your hotspots (links)

@khakiMar 18.2003 — #[B]Nedals wrote:[/B] Create a <div> that floats above your image. This div will contain a 'matrix' of transparant images, also sized relatively. These could then be used for your hot spots.[/QUOTE]Hi nabilose...

Nedals seems to have given you two possible options. Did you really try the first option (quoted above?).

It seems that "conceptually" it would work - and it wouldn't require that you alter the integrity of your original image (as his 2nd suggestion would require - which is really just an image version of his div matrix suggestion. Genius!).

This is an interesting issue...

[I]Resizing an image map based on a resized image to accomodate screen resolution[/I]. (would this be better in the Graphics forum? I wonder).

Anyway ... please be sure to keep us informed as to the progress that you having with this.

Thanks.

shorter... but less fun (for me)...

k

@NedalsMar 18.2003 — #On further study, I notice that you right-hand frame is a fixed width of 175 so you only need to deal with the vertical change.

Something like this....

<div style="text-align:center">

<a href="#"><img src="img1.gif" width=130 height=20% border=1></a><br>

<a href="#"><img src="img2.gif" width=130 height=20% border=1></a><br>

<a href="#"><img src="img3.gif" width=130 height=20% border=1></a><br>

<a href="#"><img src="img4.gif" width=130 height=20% border=1></a><br>

etc.....

</div>

@nabiloseauthorMar 18.2003 — #hey man thanks a lot it worked perfectely totally solved my problems, i broke up the image as u said and i aligned like u said and everything worked quite good thanks man?

@khakiMar 18.2003 — #Hey Nedals...

Did you ever try the [I]div matrix[/I] thing yourself to see if it would work?

It would be a lot simpler to create something like that than to chop-up an image (I would think).

Just curious (and good job on solving the image map problem. By the way... is "hotspot" and image map the same thing? I keep calling it that, but maybe they are different?).

k

@NedalsMar 18.2003 — #Did you ever try the div matrix thing yourself to see if it would work?[/quote]No, I've never tried it but, if your image was a background, you could not break it up so this may be the only way. I can't see any reason why it would not work.

In this application, using a floating layer or breaking up the image would seem to be a wash. (assuming you have ImageReady, or some such, to slice up the image)

"hotspot"!! I've never heard term myself (I was just guessing) but I suppose you could equate that to an image map application. Maybe nabilose has coined a new term or, more likely, I'm still living in the past! ?

@khakiMar 18.2003 — #[I][B]Nedals wrote:[/B] "hotspot"!! I've never heard term myself (I was just guessing) but I suppose you could equate that to an image map application. Maybe nabilose has coined a new term or, more likely, I'm still living in the past![/I][/QUOTE]Actually, I beleive that "hotspots" might be a Macromedia term. I've seen it (but never utilized it) in Fireworks. (i only use Firework's most basic features. But I love it even for that).

By the way... I wouldn't mind living in the past. Ages 9 thru 11 seemed like a fun time. lol

k[I]

(i think that the exploding dog guy is starting to p*ss me off now)[/I]

@thejoker101Mar 18.2003 — #These two pages reference each other, they explain the term hot spot.

http://www.webopedia.com/TERM/i/image_map.html

http://www.webopedia.com/TERM/H/hot_spot.html

@khakiMar 18.2003 — #Thanks Joker!

So in keeping with Nedals' mathematical theme...

a [I]hotspot[/I] is a sub-set of an [I]image map[/I].

(that's math, right? I think I learned that in math class. Sets, sub-sets super-sets, etc.

Then again, why [I]would[/I] that be taught in a math class? It's got no numbers!).

actually really sucky at math...

k

@thejoker101Mar 18.2003 — #If you want to think of it in math terms, then yeah, it's a sub-set.

@ozoneAug 19.2006 — #Nedals,

I have the same problem with my hot spots moving.

I am a novice and I mostly use WYSIWYG, but I pasted your code into mine, did a little research and pasted some more in, played around and it looks like it SHOULD work, but doesn't. It seemed to sort of work when I first started, but now when I preview the page it just shows the image with no hyperlinks working at all

In general, I prefer a simple quick loading page, but I really liked the idea of creating a website that has its own sort of console look. So I've designed the website with a frame at the top, one on the side and the main frame in the middle. When you surf to each major topic the "console" changes shape and color. Clicking minor topics change only the content in the main middle frame.

In the code below all the images are transparent images and the hyperlinks are just temporary links to other pages in the document to see if it was working.

I'd really appreciate it if you could steer a newb in the right direction.

Thank you.

Code to follow:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>New Page 2</title>

<base target="main">

<meta name="Microsoft Theme" content="stars 1011">

</head>

<body topmargin="0" leftmargin="0">

<p>

<img border="0" src="images/side_12.png" width="254" height="100%"></p>

<div style="

top: 0px;

left: 46px;

position: absolute;

z-index: 2;

visibility: show

text-align:center">

<a href="#"><img src="img1.gif" width=130 height="2%" border=0></a><br>

<a href="#"><img src="img2.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img3.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img4.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img1.gif" width=130 height=3% border=0></a><br>

<a href="auto_philosophy.htm"><img src="images/button_image.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img3.gif" width=130 height=3% border=0></a><br>

<a href="blue_frame_cars.htm"><img src="images/button_image.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img2.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img3.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img4.gif" width=130 height=3% border=0></a><br>

<a href="chronicles1.htm"><img src="img5.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img6.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img7.gif" width=130 height="3%" border=0></a><br>

<a href="#"><img src="img8.gif" width=130 height="3%" border=0></a><br>

<a href="#"><img src="img9.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img10.gif" width=130 height=3% border=0></a><br>

<a target="_top" href="electrical_general.htm"><img src="img11.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img12.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img13.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img14.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img15.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img16.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img1.gif" width=130 height="4%" border=0></a><br>

<a href="#"><img src="img2.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img3.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img4.gif" width=130 height="2%" border=0></a><br>

<a href="#"><img src="img1.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img2.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img3.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img4.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img1.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img2.gif" width=130 height=3% border=0></a><br>

<a href="#"><img src="img3.gif" width=130 height="4%" border=0></a><br>

</div>

</body>

</html>

Forward Message

@NedalsAug 20.2006 — #As you said in your PM, that's a pretty old thread.

Generally, it's better to start a new thread with a link back to the old one for reference.

Based on the code you supplied, it looks like you are trying to put a <div> over your image. Then you are attempting to keep the transparant images, the links, correctly aligned with the base image. Not an easy task at the best of times. As I said before, you would be better off splitting your original image. The percentages you have defined will come back to bite you. ?

[i]but now when I preview the page it just shows the image with no hyperlinks working at all[/i]

The hyperlinked 'images' are hidden.

You need to add a width and height to your <div>

<div style="

position: absolute;

top: 0px;

left: 46px;

width:130px;

height:100%;

z-index: 2;

visibility: show

text-align:center">

You don't need the z-index or the visibility, especially when the ';' is missing. ?

@ozoneAug 20.2006 — #Thank you. That is very helpful.

Also in #HTML _↴

Validation error in search inputs Form doesn't work properly Auto-redirect to previous page

Success!

Help @nabilose spread the word by sharing this article on Twitter...

Tweet This

hotspot question

17 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

hotspot question

17 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #HTML _↴