adding things to images? (1 Viewer)

NewfieSarah

Registered User.
Local time
Today, 07:39
Joined
Feb 11, 2005
Messages
193
Hey all, I was wondering if there was a way that I can add things to my image. I have an image of a map of my local area and I would like to have my user be able to click on different areas on the map to display information on specific local things in the are. How is this possible? Thanks
 

Minkey

Registered User.
Local time
Today, 10:09
Joined
Jul 7, 2004
Messages
661
Oooh nice one Kodo, I didn't realise Google made the API available :)

NewfieSarah - There are numerous ways to do this 'on your own' as it were, you could use the tooltip script - tutorial here or you could use a mouse over event to do a swap image behaviour on the location you have highlighted.

So you would have an original image (your 'location marker') and on mouse over swap image to your second image (your 'specific information').

What software are you using to design your web page ? as most have this function built in. If you doing it in html only it will be little trickier if your a beginner.

BTW you can find loads of stuff here
 

Sergeant

Someone's gotta do it
Local time
Today, 06:09
Joined
Jan 4, 2003
Messages
638
I'm sitting here making something in Dreamweaver, and I notice that when you select an image in design view...you get options in the property sheet at the bottom for hyperlinked 'hotspots' in the image. (I have Dreamweaver Studio MX w/Flash, Fireworks, etc... so I don't know if this is available in normal dreamweaver.)
If you use Notepad (first of all, you are my hero)...you can shoot me the image and I'll try to make some hotspots and send it back to you.

...I've just checked to see what it writes, and here is a sample with two hotspots on the image:
Code:
<div align="left"><img src="Img/teHeader.png" width="584" height="371" border="0" align="middle" usemap="#Map">
      <map name="Map">
        <area shape="rect" coords="117,82,190,160" href="http://www.google.com" target="_blank">
        <area shape="rect" coords="1,1,35,34" href="http://www.google.com" target="_blank">
      </map>
</div>
The coords argument seems to be counting in px as follows:
Left, Top, Right, Bottom
It would take some trial and error without a WYSIWYG editor.
 

NewfieSarah

Registered User.
Local time
Today, 07:39
Joined
Feb 11, 2005
Messages
193
Hey Sergeant: Here is a question, How do I find out to make differnt coords? Since my image is a different size, I was thinking that I could have 2 rect for each side of my image. I am using HTML and my image size on my page it width="950" height="550" I would like to have 2 rect on on each size so I can load different size pics of each half of the page. Thanks

Sergeant said:
Code:
<div align="left"><img src="Img/teHeader.png" width="584" height="371" border="0" align="middle" usemap="#Map">
      <map name="Map">
        <area shape="rect" coords="117,82,190,160" href="http://www.google.com" target="_blank">
        <area shape="rect" coords="1,1,35,34" href="http://www.google.com" target="_blank">
      </map>
</div>
The coords argument seems to be counting in px as follows:
Left, Top, Right, Bottom
It would take some trial and error without a WYSIWYG editor.
 

Sergeant

Someone's gotta do it
Local time
Today, 06:09
Joined
Jan 4, 2003
Messages
638
Everything you need to know is included in my first reply. Try playing with it. The coords are Left, Top, Right, Bottom. You can put multiple hotspots in one pic.
 

NewfieSarah

Registered User.
Local time
Today, 07:39
Joined
Feb 11, 2005
Messages
193
Thanks Sorry I didnt notice the bottom of your first message. That is what I needed to know. You are right it will take me a while to get it right since I am using notepad. Thanks!
 

NewfieSarah

Registered User.
Local time
Today, 07:39
Joined
Feb 11, 2005
Messages
193
Oh I was wondering if there was a way to have a hover message dispay instead of a window opening? Like a little pop-up message Thanks
 

reclusivemonkey

Registered User.
Local time
Today, 10:09
Joined
Oct 5, 2004
Messages
749
Use the ALT="" and TITLE="" tags for your images/links. Using both will ensure you get a "Tool Tip" type message in both IE and Web Standards compliant browsers ;-) (The title tag isn't honoured by IE, but the alt tag does the same thing).
 
Last edited:

Minkey

Registered User.
Local time
Today, 10:09
Joined
Jul 7, 2004
Messages
661
For the 'hover' message you can use the tooltip script I posted, I wouldn't recommend using popup's most people don't like them and will have them blocked.

BTW There are tonnes of html, javascript etc. tutorials out there I'll post a few when I get home (got a train to catch)
 

Minkey

Registered User.
Local time
Today, 10:09
Joined
Jul 7, 2004
Messages
661
Here's one of the best w3schools the first link on the list is learn html, I'm sure you'll be able to find something relevent in there :)

You'll be able to learn all you need including scripting from there.

This is a good site for examples dynamicdrive

Oh BTW I've never learn HTML or scripting I use Dreamweaver which can display the code behind the GUI and have picked up bits and pieces along the way, I guess I'm just lazy :) and impatiant ! If your like me you can download a 30 day trial version from here and used in conjunction with Fireworks you can produce some very professional results in a very short space of time.

Just before anyone else says it learning HTML is the best way to start even if you do end up using something like Dreamweaver ;)
 
Last edited:

Sergeant

Someone's gotta do it
Local time
Today, 06:09
Joined
Jan 4, 2003
Messages
638
reclusivemonkey said:
Use the ALT="" and TITLE="" tags for your images/links. Using both will ensure you get a "Tool Tip" type message in both IE and Web Standards compliant browsers ;-) (The title tag isn't honoured by IE, but the alt tag does the same thing).
That's funny, I use Title for tooltip in IE, and it works. I have the latest IE version, though...maybe that's it.
 

reclusivemonkey

Registered User.
Local time
Today, 10:09
Joined
Oct 5, 2004
Messages
749
Sergeant said:
That's funny, I use Title for tooltip in IE, and it works. I have the latest IE version, though...maybe that's it.

Which version is that Sergeant? I only use IE at work (its all Linux at home), and of course I am at the mercy of the ICT Department for updates (I think we are somewhere in the 6 region). We may get IE 7 some time next century...

Any steps towards standards compliance is welcome with me! :)
 

Sergeant

Someone's gotta do it
Local time
Today, 06:09
Joined
Jan 4, 2003
Messages
638
I'm using IE 6 SP2 and Title="Whatever" produces a tooltip.
 

Sergeant

Someone's gotta do it
Local time
Today, 06:09
Joined
Jan 4, 2003
Messages
638
I know how you feel. My computer's been plottin' on me for some time now.
 

reclusivemonkey

Registered User.
Local time
Today, 10:09
Joined
Oct 5, 2004
Messages
749
Sergeant said:
I know how you feel. My computer's been plottin' on me for some time now.

LOL, I wish Sergeant. Its my brain that has been plotting against me...

I had actually been using the ALT tag to get a "tool tip" for images. This works in IE, although its not really what it was intended for. FF didn't give a tooltip, but as I had seen FF do tooltips elsewhere, I went off to have a look. I found out that I should of been using TITLE, which is of course the correct way to get a tooltip. For some reason my addled brain decided I had to use ALT in IE, and TITLE in FF. This of course is rubbish, TITLE works just as it should in both browsers! So I am now going through all my HTML and making sure I have TITLE for the tooltips and ALT as it should be used, as a description.

At least my brain allows me to realise when I am wrong... I guess that's something. Thanks for the prod ;-)
 

Users who are viewing this thread

Top Bottom