The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> usemap - image call out, How do I keep all images on the same page?
charliecat
post Sep 1 2015, 04:48 AM
Post #1





Group: Members
Posts: 3
Joined: 1-September 15
Member No.: 23,471



Hi,

I am trying to build an interactive plan using usemap. The map is a jpeg of the plan of a local park, and I want to be able to click on places of interest and display another image and a some words of description.

The problem I am having is that the clicked image displays in another window, and I want it to overlay the main plan image. Changing the target tags in <area> don't seem to make any difference (I thought they would). I suspect there is a way of doing this without having to resort to scripting.

(The text part works OK using title)

Is there?

Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 1 2015, 07:52 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



See http://www.stunicholls.com/various/solar_map.html .

Although in the example there isn't an image in the tooltip when a spot is clicked, surely you can add one.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 1 2015, 08:01 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Do you really mean another window, a new browser window? In that case you need JavaScript to position it (and open it). Or do you mean you show a hidden DIV? Then you probably need CSS positioning.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
charliecat
post Sep 1 2015, 08:41 AM
Post #4





Group: Members
Posts: 3
Joined: 1-September 15
Member No.: 23,471



Frederiek,

Ah, thanks. I wasn't beng precise enough.

The seleted image opens in the same window, but clears the previous content.

Not sure I fully understand your solution, but it works when I try it with an image. So now I have something I can spend time editing to get it exactly how I want it, and learn something at the same time.

Thanks!!

This post has been edited by charliecat: Sep 1 2015, 08:41 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
charliecat
post Sep 1 2015, 08:51 AM
Post #5





Group: Members
Posts: 3
Joined: 1-September 15
Member No.: 23,471



Pandy,

Thanks for your comment. What I'm trying to do is very similar to what Frederiek has done in his script. Click on an area on the 'map' and call out an image and text to describe the area clicked on.
Is there antehr way of doing this that you know of?

Thanks in anticipation.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 1 2015, 04:55 PM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



It's not my script, but from Stu Nicholls.

The solar map example already uses a small javascript. Surely that script comes with the download. Otherwise, view the source of the sample page and its resources to see how it's done.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 07:19 PM