0

I'm using Dreamweaver to derive the pixel co-ordinates for image maps. One is already done but the other is proving impossible, perhaps because what I intend isn't permissible. My 'impossible' image that I'd like to set hotspots for is one of the list entries inside an unordered list, and whenever I try to select the img element in code view to marquee the map, it won't work and selects the ul element instead.

I only ever use this software for image-mapping and its code validation feature, but its a pain and I'd just as soon do without it if there's a method for defining/calculating pixel co-ordinates for a circular image map.

Any advice, or is DW behaving itself and what I'm trying isn't permitted in HTML?

Updated: To be more specific, it's not just a list but a div-bounded list that acts as a gallery with its input from clickable thumbnail image anchors, as per the code below (just one list item for clarity). What I'd like to do is make 'stuff-medium.jpg' a clickable image that maps to the next image in the gallery (via a href "#two"), providing navigation bars for my gallery also...

<div id="gallery">
<ul id="gallery-interior">
<li id="one"><img src="../images/stuff_medium.jpg"></li>
</ul>
</div>

<div>
<a href="#one" target="_self"><img src="../images/stuff_thumb.jpg"></a>
</div>

Update II -- this code works; I did it by hand, but I'm blown if I can figure out how to do it in DW:

<li id="one"><img src="../images/stuff_medium.jpg" border=0 usemap="#gallerymap">
<map name="gallerymap"><area shape="circ" coords="399,157,30" href="#two" target="_top"></li>
user3492855
  • 37
  • 2
  • 8
  • couldnt reproduce your problem, can you be more specific? your example in jsfiddle: http://jsfiddle.net/q8444/ – vaskort May 06 '14 at 14:17
  • JavaScript can do this with without Dreamweaver or image maps. See: http://stackoverflow.com/questions/2712744/finding-the-closest-grid-coordinate-to-the-mouse-position-with-javascript-jquery – Diodeus - James MacFarlane May 06 '14 at 14:22
  • Why would you use an imagemap over UI elements that already have their OWN event handlers? – Diodeus - James MacFarlane May 06 '14 at 14:23
  • here is [Bill K's Fiddle](http://jsfiddle.net/q8444/1/) with a circular image map created in dw. not sure why you are having an issue. in code view, dw doesn't restrict the selection of anything. – MilkyTech May 06 '14 at 14:24
  • @Bill K -- thanks for input, question now more specific; – user3492855 May 06 '14 at 14:36
  • @Chris M -- thanks for input, question now more specific; – user3492855 May 06 '14 at 14:37
  • Yes but still, what I suggest is take your time and make a jsfiddle, im sure there is a solution or an alternative (Btw never used mappings for anchor tags, most likely there is a better alternative) – vaskort May 06 '14 at 14:42
  • So, you want a slide show that you can go from slide to slide either by clicking the thumb or clicking the current image? a jQuery slideshow would be the best solution for this. there are many free ones out there. – MilkyTech May 06 '14 at 14:44
  • what i understand is the image in the list should work as a next button, not sure though – vaskort May 06 '14 at 14:46
  • thats what I think he wants – MilkyTech May 06 '14 at 14:46
  • 'Next button' -- that is indeed what is wanted, but js and jquery are off the menu I'm afraid: my navigation has to work for those who block script – user3492855 May 06 '14 at 14:55
  • Thanks for your assistance gents, but I figured it out manually in the end (working code updated in question). If you can map this in DW then I'm not sure what I'm doing wrong, but now that I've figured a manual method I'm happy (and Js-free to boot). Bad form to accept my own answer to my own question, so I won't! – user3492855 May 06 '14 at 15:18
  • 1
    I wouldn't worry about the very very few users that block javascript. If they do, they are used to a very poor web experience already anyhow. – MilkyTech May 06 '14 at 16:00
  • 1
    a +1 goes a long way by the way – vaskort May 06 '14 at 16:12

1 Answers1

0

Place a warning in your code that only shows up if javascript is turned off. Use js to add a class to the body. if js is turned off, the class won't be added and the message will be displayed, if js is on, the class will be added to body and the msg will not be displayed

html:

<aside id="js-warning">This site requires JavaScript to work properly.  Please turn it on for more awesomeness!
</aside>

js:

<script>
$(document).ready(function(jswarning) {
    $('body').addClass('js');
});
</script>

css:

#js-warning {
    display:block;
}
.js #js-warning {
    display: none;
}
MilkyTech
  • 1,919
  • 2
  • 15
  • 39