We Keep Coding

Clickable images on parallax

what I am trying to do is to create menu, instead of links, a clickable image. However, these images are parallax layers. How should I approach this ? Should the clickable images be on separate layers ?
This is the image I am going to use. I would like that tower in background to take you to gallery, but at the same time, that layer, as mentioned will be parallax.
Any ideas ?

It's probably a good idea if you create a separate parallax layer that contain absolute positioned links as a form of navigation. If you strictly want to map certain areas on the image as links, you might want to use a tag as in this example taken from here:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
The shape defines the type of area of each clickable area, the coords define the perimeter of said areas; the href attributes define where the page navigates if said area is clicked.
To achieve this with a non-basic shape, you can set the type to "poly" and then set the polygon's each anchor point's coordinates as such:
<area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html" alt="Yellow star.">

change clickable coordinate image to css

Im trying to make the background image of my website clickable in certain coordinates. I dont have the ability of editing the main template as the script im using is prebuilt to add custom code into it (phpfox).
The problem i have is the code i am using is html and i need it to be css
<img url="../image/layout/bg.png" width="1920" height="1080" border="0" usemap="#Map" />
<map name="Map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:ImithRian -->
<area shape="rect" coords="43,36,174,803" href="http://www.battlefieldsquad.com/" />
<area shape="rect" coords="1469,99,1866,225" href="http://www.battlefieldsquad.com/index.php?do=/battlefield4/" />
<area shape="rect" coords="1564,457,1793,619" href="http://www.battlefieldsquad.com/index.php?do=/pages/3/" />
<area shape="rect" coords="1597,657,1773,878" href="http://www.esl.eu/eu/team/7931638/" />
</map>
Any suggestions ?

I can't think of a pure css-Solution. But if you want to put the image into a div as background,
you can get the position of a click relativ to your site via jQuery
HTML:
<div class="background">
Some content and a background image
</div>
Javascript:
$('.background').click(function(event){
console.log(event.pageX + " " + event.pageY);
//at some coordinate do something (e.g. go to another site)
});

As far as I know, the coordinates for an image map is just an html feature, not available as a style rule in css. What you can do if you want to change the values of the coordinates without having access to the html is reaching the element via javascript and performing the modifications then. I can provide you that code if you are interested in doing it that way.
This is the way you can tackle that with javascript (THE FIDDLE HERE)
Let's say you have a world map and you have defined a clickable link for the continents: North America, South America, Europe and Asia, Africa.
<img src="http://3.bp.blogspot.com/--Qn8gNCWlUc/UVhKBl5o5aI/AAAAAAAACYI/wMLgckCYQIs/s1600/Screen+Shot+2013-03-31+at+12.59.10+AM.png" border="0" usemap="#Map" />
<map name="Map">
<area shape="rect" title="north america" coords="43,36,174,803" href="http://www.battlefieldsquad.com/" border="2" />
<area shape="rect" title="south america" coords="1469,99,1866,225" href="http://www.battlefieldsquad.com/index.php?do=/battlefield4/" />
<area shape="rect" title="eurasia" coords="1564,457,1793,619" href="http://www.battlefieldsquad.com/index.php?do=/pages/3/" />
<area shape="rect" title="africa" coords="1597,657,1773,878" href="http://www.esl.eu/eu/team/7931638/" />
</map>
<br /><br />
<button type="button" id="fixer">Fix this mess!</button>
When you hover the mouse on the map you notice that just the shape for North America is there and in a wrong position (a tip shows up after a second).
Bellow the map you have a button to fix that. That button execute this code:
document.getElementById("fixer").onclick=function(){
var coords = ["70,100,400,320", "320,350,425,580", "510,100,1050,300", "480,300,680,500"];
var mapper = document.getElementsByTagName("area");
for(var i = 0, j = mapper.length;i < j;i++){
mapper[i].coords = coords[i];
}
}
And once you press the button you can hover the mouse then on the continents and check they are showing up now and in the right position, because the js code changes the coordinates of each shape:
var coords = ["70,100,400,320", "320,350,425,580", "510,100,1050,300", "480,300,680,500"];
That's an array with the right coordinates for each area shape from top to bottom.
The rest of the code is to set up the coordinates. You just have to edit the above line to meet your own coordinates.
I hope it helps. And by the way, if you are finally going to use this approach, you might want to add the tag javascript to your question. Regards.

Replace this.href with this.title

The below code works perfectly to reveal an image when a user mouses over an hotspot of an image map. The only problem? When clicked 'this.href' of course takes the user to the hotspot image itself. I'd like to reserve 'href' to send the users to the page of my choosing.
Is it possible to use "title" rather than 'href' to define the hotspot image? If so, please show details, I'm very new to javascript, thank you!
<script type="text/javascript">
function ShowPicC(sImage){document.housec.src = sImage}
</script>
<img border="0" src="main-image.png" width="640" height='640' usemap="#FPMap0">
<map name="FPMap0">
<area onmouseover='ShowPicC(this.href)' href='hotspot1.png' alt="thisalt" title="can-png-go-here.png" shape="circle" coords="400,400,20">
<area onmouseover="ShowPicC(this.href)" href="hotspot2.jpg" alt="youralt" title="can-png-go-here2.png" shape="circle" coords="420,420,20">
<area onmouseover="ShowPicC(this.href)" href="hotspot3.jpg" alt="differentalt" title="can-png-go-here3.png" shape="circle" coords="440,440,20">
<area onmouseover="ShowPicC(this.href)" href="hotspot4.jpg" alt="whateveralt" title="can-png-go-here4.png" shape="circle" coords="460,460,20">
</map>
<img name="housec" src="starter-hotspot-image.png" width="192" height="170">

Sure, although title isn't a valid property of area. Did you try it?
<area onmouseover="ShowPicC(this.title)" title="someotherimage.jpg" ...
You may be better off using a data attribute:
<area data-image="someotherimage.jpg" ...
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Jump to a specific location on an image map

I have a big image with an HTML <map>, and I want to jump to a particular region on that image. I have used the <area /> tag for marking the locations
Take a look at the code :
<img src="demo_files/k3.png" id="target" alt="Map" usemap="#powerpuffgirls" />
<map name="powerpuffgirls">
<area shape="rect" coords="624,137,671,167" href="#" id="ppg" title="The Powerpuff Girls" alt="The Powerpuff Girls" />
<area shape="rect" coords="99,2685,161,2723" href="#" name="ppg1" title="The Powerpuff Gidrls" alt="The Powerpuff sGirls" />
</map>
however, I am unable to move to any region on the image.
Edit: Any other approach for moving to an image's particular region would be great !!

Try this link
$('a.links').click(function(e){
e.preventDefault();
var coor = $(this.hash).attr('coords').split(',');
$('html,body').scrollTo(coor[0], coor[1]);
});
i have used the plugin scrollTo
the script will prevent default function of a tag and will get the coordinates attribute from the area tag with the id from the href attribute and calculate the positions and scroll to that position

Check this demo i have created...
Try to navigate the areas by id...
<div>Go to one Go to two</div>
You have to play with the area coordinates in it...
http://jsfiddle.net/D9W6C/

How do you JavaScript style area elements on mouseover?

I've got an image map with 20 area elements, only four shown below. I want to style each area so that a blue border appears whenever a user hovers over it - all the area shapes are rectangles.
<map id="mymap" name="mymap">
<area shape="rect" coords="0,0,223,221" href="http://..." />
<area shape="rect" coords="226,0,448,221" href="http://..." />
<area shape="rect" coords="451,0,673,223" href="http://..." />
<area shape="rect" coords="677,0,1122,223" href="http://..." />
...
</map>
I've tried using CSS to style each area, but it's not working. And I've tried to put an onmouseover=color() on the map element and call the following function, but that doesn't seem to be working either:
function color() {
var blueboxes = document.getElementsByTagName('area');
for(var i=0; i<blueboxes.length; i++) {
blueboxes[i].style.border = 'solid blue 5px';
}
}

mapper.js can be used for this.
Mapper.js 2.4 allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG).
It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it can use "jsgraphics" from Walter Zorn (if installed), else it'll degrade and your visitors won't notice a thing.
Sample code from that website:
Please note that everything below this line is his code and wording, not mine. Full attribution belongs to the link above.
Setting Up
Download mapper.js and include it into your webpage.
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="mapper.js"></script>
"wz_jsgraphics.js" is copyright by Walter Zorn and not part of the distribution!
Using It
To get the highlighting just add a class="mapper" to an div surrounded image.
<div>
<img src="..." class="mapper" usemap="..." alt="...">
</div>
To get individual area highlightings add one or more classes to the area.
<map>
...
<area shape="poly" class="noborder icolor00ff00" href="#" coords="...">
...
</map>
To get multiple area selections add one or more id's to the areas rel attribute.
<map>
...
<area shape="poly" id="blue" rel="green,red" href="#" coords="...">
<area shape="poly" id="green" rel="red,blue" href="#" coords="...">
<area shape="poly" id="red" rel="green,blue" href="#" coords="...">
...
</map>
To force a group of areas using the attributes of the initial area.
<map>
...
<area shape="rect" id="black" class="icolor000000 forcegroup" rel="green,red,blue" href="#" coords="...">
...
</map>

The area tag can't be styled like a normal anchor. I would use a different approach. You could apply your image to a div as the background-image and then position clickable elements over the div by using position: absolute.
Take a look at this technique: http://www.alistapart.com/articles/cssmaps/

Can Raphaeljs helps?
Have a look at this sample :)

Usually the approach I see is to build the imagemap itself out of different images in CSS. Here's a good example of this:
http://ago.tanfa.co.uk/css/examples/europe-map.html