Doing a big part of work around html image maps and suddenly I am not able to edit image maps:
- when clicking on an image with map edit tool, it adds the first point, but then focus is lost and 'multiple CSS p-elements' are selected, so I am not able to create any shapes, but adding single points only.
Dreamweaver can only make image maps for images with position:static
Related
I had a quick search for this problem and couldn't find anything that satisfied both parts so I hope this is ok to ask:
I am creating an interactive map which has an aerial image of a location as a background, with small icons overlayed over the top. These icons, when clicked should open a popup window with images or videos that have been taken in those locations, much like a google map.
I have found code to allow me to layer images over each other here:
Html Image over image
And I have found code for a popup here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
And I can get both of these elements to work separately on my webpage, however I'm stuck as to how to combine them so that the image I have overlayed can be clicked on to trigger a popup.
It's been a while since I have coded in HTML and I can usually handle these kind of challenges but I'm finding myself a bit out of my element here.
Thanks!
as most of you who use the Google Maps API would be aware, there's the new feature which requires the ⌘ key on Macs and the Ctrl key on Windows to be held down to enable scrolling.
The feature has now grown on me a bit and I've decided not to disable it, but the dark opacity overlay with the text in the middle is a bit overbearing and not very user friendly as the map is basically useless until it disappears.
'Click here to view example image of map overlay'
My question is, am I able to style this in any way? I'd ultimately like to get rid of the text and the overlay altogether, or just the overlay, or just make the overlay surround the text with a small margin like a text box. Is any of this possible?
Thanks in advance!
I have page that displays multiple Google Maps on one page. On the maps I have my logo in the top left. I have noticed it only displays on the first map. I have an idea why but I am not sure what I need to add for it to display on the other. It inherits all the other map controls so I not sure why it doesn't do this for the logo on both maps.
Here is a link to the page
EXAMPLE
Here is the link to the code for the map
CODE
Any suggestions?
-Thanks
Looks to me like you are only adding it to "map":
map.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);
if you want it on map1, you need to add it to there as well:
map1.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);
(you might need to make another copy for map1)
I have a very peculiar requirement and I am not an HTML expert. I need to create a CHM (Compiled HTML File) in which I want to use an image (a single screenshot) that will have parts of the image linked to other sections in the help file. In other words I want to hover the mouse to individual regions in the single screenshot to link to other parts of the help file.
Just for information the screenshot is a shot of various buttons and checkboxes that are a part of the application.
I do not wish to break up the single image into multiple images and then link each image to another part of the help file (that explains the function of the image). I think that is very much possible and not a problem at all.
If you can just in brief explain how this can be done or provide me a link I would be grateful.
You can use an Image Map for this. You basically have a normal image and then place various invisible shapes over the image. You can then use all the shapes for hover and click events.
With some googling I found this: http://www.htmlcodetutorial.com/images/images_famsupp_220.html
Consider using an HTML image map, which you can create online here. An HTML image map is a set of tags describing various regions of an image that can have links of their own.
Aren't those called "image maps"? HTML has a tag called <area> (and <map> itself) which allows you to do this.
http://www.javascriptkit.com/howto/imagemap.shtml
Try the HTML Image Map:
Creating HTML Image Maps
You'll need to use an image map for this. If you want to get a bit fancy and have rollover's for this you could think about using the ImageMapster jQuery plugin.
http://www.outsharked.com/imagemapster/examples/usa.html
I'm dynamically generating an imagemap for a chart tool I have.
I was hoping to be able to set a border or color on the area tags so I could check everything was being generated with the right coords, but a little research shows this is not possible.
So whats the easiest way to check my image map is correct? Are there any browser tools which will "visualise" the areas?
What about using JavaScript (and jQuery) to test it?
http://davidlynch.org/js/maphilight/docs/demo_usa.html
This plugin will highlight image map areas.
You can use FireBug for that:
Right-click your image and choose "Inspect Element with FireBug"
In the HTML tab of Firebug, the image tag is highlighted: locate and expand the associated map tag, which usually is right after it
You can now place your mouse over each area tags to see them highlighted over your image
One way to visualize an area tag in Chrome is to add a tabindex to the area tag(s) you want to see, and then click or tab to it. Chrome will nicely highlight the actual outline of the clickable area.
This solution unfortunately doesn't work in Firefox.
Image Map Editor is a plug-in for Firefox. It is the best tool I have found so far, makes creating, inspecting, and editing image maps very easy.
In Chrome you can select the area of the image map and click on the three little dots
to the left and then select "focus"
Never thought I would ever say that, but this is one of the few cases where Dreamweaver could be helpful. You'll have an interface, you will be able to work with anchor points and set your imagemap easily.