hot spot on just style sheet?

This site is best viewed in a modern browser with JavaScript enabled.

piers22

hi, i am using media queries to style a website for a few different devices. I am creating new background images to suit the screen size. Is it possible to add hotspots to media queries? I have tried to use image maps but cant seem to get the hotspots working? is this the correct way to do this?

The css is

@media only screen and (min-width: 533px)and (max-width: 533px){
.container{ background-image:url("http://www.rootdesignbelfast.co.uk/wp-content/uploads/2014/01/Kindle-533-x-8531.png") alt="" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="78,181,152,209" href="http://www.rootdesignbelfast.co.uk">
<area shape="rect" coords="178,180,255,208" href="http://www.rootdesignbelfast.co.uk/about/">
<area shape="rect" coords="276,182,358,205" href="http://www.rootdesignbelfast.co.uk/work/ngo/">
<area shape="rect" coords="379,183,458,210" href="http://www.rootdesignbelfast.co.uk/contact/">
</map>) ;}

can anyone help?

rtrethewey

You may need to repost your code. The line:

.container{ background-image:url("http://www.rootdesignbelfast.co.uk/wp-content/uploads/2014/01/Kindle-533-x-8531.png") alt="" usemap="#Map"/>

looks like it got cut off because you've got HTML mixed in the CSS code.

piers22

@media only screen and (min-width: 533px)and (max-width: 533px){
.container{ background-image:url("http://www.rootdesignbelfast.co.uk/wp-content/uploads/2014/01/Kindle-533-x-8531.png") alt="" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="78,181,152,209" href="http://www.rootdesignbelfast.co.uk">
<area shape="rect" coords="178,180,255,208" href="http://www.rootdesignbelfast.co.uk/about/">
<area shape="rect" coords="276,182,358,205" href="http://www.rootdesignbelfast.co.uk/work/ngo/">
<area shape="rect" coords="379,183,458,210" href="http://www.rootdesignbelfast.co.uk/contact/">
</map>) ;}

piers22

i can;t seem to post the code i am using here, which maybe due to the fact i was using html to map the hotspots.

how can i add hotspots to a background image that i am trying to use in my style sheet.

basically my site looks one way on web screens but on some tablets i am trying to use media queiries to style the page different than your average screen size,

So an example, screens size for most laptops maybe have shown a background image, my issue is i want to have a new background image that i have designed to look ol on all tablet screens, but this image i am using medis quirers to display a brand new image for each screen sizem so each of the background imaghes had a new design. A new image for each screen sixe has been created. but when i use media queries for various screens the backgounf image shows fine, but i need to add hotspots to the backgeiund image so people are not aware that eaxh image has been modififed to suit the screen size, so my media quries would work but i just need to jbnow how to add hotspots to my css style sheet f0r these changes which i currebtlt dont have a mac screen

rtrethewey

I guess it hardly matters, now that I think about it.

You can't use HTML <map>s on a background image. One way to do something like that would be to use JavaScript to detect clicks in the background's parent element and the the position of the mouse at the time. If you just change the background image depending on the screen size, it shouldn't be difficult to do. You could also create some transparent/invisible <div>s that overlay the image's parent element (using z-index) and detect clicks on those with JavaScript - which would be a bit easier than working out whether a mouse click fell in a particular area. Overall, it might be easiest to simply use a regular HTML <img ismap> with some JavaScript to swap the 'coord' attributes of the <area> tags in and out depending on the screen size at onload() and on any resize() events. But any way I look at it, you're going to need some JavaScript.

piers22

rtrethewey;1311493 wrote:
I guess it hardly matters, now that I think about it.

You can't use HTML <map>s on a background image. One way to do something like that would be to use JavaScript to detect clicks in the background's parent element and the the position of the mouse at the time. If you just change the background image depending on the screen size, it shouldn't be difficult to do. You could also create some transparent/invisible <div>s that overlay the image's parent element (using z-index) and detect clicks on those with JavaScript - which would be a bit easier than working out whether a mouse click fell in a particular area. Overall, it might be easiest to simply use a regular HTML <img ismap> with some JavaScript to swap the 'coord' attributes of the <area> tags in and out depending on the screen size at onload() and on any resize() events. But any way I look at it, you're going to need some JavaScript.

I am not that used to javasrpit and wouldnt really no where to start with this, is there anywhere i can get some help or tips on how to set this up. i am basically trying to use media queries to style my site for all devices and screens, for tablets and mobiles i want to use just a background image which will have 4 menu buttons which i need clickable to link to certain pages. Is java script the only way?

rtrethewey

Unfortunately, image maps don't always work in responsive design layouts because if the size of the image changes, then the coordinates of the hotspots must change as well.

If you don't know JavaScript, then the best solution will be to use regular <a>nchor tags that contain your menu images using position:absolute. Then your stylesheet can adjust the position of those menu links as needed.

jedaisoul

A side point, media queries do not work on IE8 and below. So, if you use different images, you may find that all, none, or (hopefully) just one of them will be displayed by IE8! That is not the fault of media queries, and is of decreasing importance as the number of users on IE8 dwindle, but even 5% or so of users globally is still a lot of uses!

rtrethewey

IE8 compatibility shouldn't ever be an issue for media queries. You just set your default CSS rules for laptops and desktops, and then use media queries to hold the rules for other devices that don't support old versions of IE.

piers22

rtrethewey;1312239 wrote:
IE8 compatibility shouldn't ever be an issue for media queries. You just set your default CSS rules for laptops and desktops, and then use media queries to hold the rules for other devices that don't support old versions of IE.

So i guess now my question is as i am lost with what to do next, is there anyone that could help me (paid if needed) . If i provide this code .container{ background-image:url("http://www.rootdesignbelfast.co.uk/wp-content/uploads/2014/01/Kindle-533-x-8531.png") ;}

could someone possible look at the image in the link about and help me get the four buttons clickable? I am not sure about adding in javascript, or even div tags, if using divs would i not need to add the div element into html somewhere? what i dont understand is where the html part of this would go as the main pages html relate to the main theme?

So confused now about this and been wrecking my brain for a full week now.

jedaisoul

rtrethewey;1312239 wrote:
IE8 compatibility shouldn't ever be an issue for media queries. You just set your default CSS rules for laptops and desktops, and then use media queries to hold the rules for other devices that don't support old versions of IE.

Agreed, but if someone does not test their code on IE8, they might not realize that was the case.

jedaisoul

Here is a static demo of the animation of the buttons that can be achieved just with HTML/CSS i.e. no JavaScript.