If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

hot spot on just style sheet?

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?

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

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.

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?

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.

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!

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.

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.

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.