Reputation: 55

Image map a background image?

I am creating a website for an app I developed. The background of the website in an image that I photoshopped on a desk with an iPhone on it displaying the home screen of my app. I want to image map the background image so when you click on the screen it takes you somewhere. I am aware on how to image map so I already tested the image map using the <img> tag. It works fine; however, I want the image to have the property “background-size: cover;” so it fills the screen at all times and maintains aspect ratio, leaving no whitespace. This property only works for background images or <div> tags; unfortunately, you can only image map on <img> tags (I think). I have been researching this for hours. Also, my image map is a polygon so it is unique. Thank you for any help in advance.
enter image description here

Upvotes: 4

Answers (2)

Ben Visness

Reputation: 5809

First of all, HTML and CSS do not have a native way of scaling image maps to different sizes. However, there are Javascript workarounds to this. See this question: Responsive image map.

The CSS object-fit property seems like your best option for scaling the image. However, at the time of this writing, no version of Internet Explorer (including Edge) supports this property.

Really, I think the best solution is to rethink your layout. There is probably no way to solve this problem as stated in an efficient and widely-compatible way.

So, here is what I would recommend:

Remove the phone from the background image and make it a separate element.
Use the widely-supported background-size: cover for the background image.
Use a phone image that is not rotated, and absolutely position your <a> tag on top of the image to align with the screen or specific UI elements.
Use CSS transforms to rotate and scale the phone. Browsers know what to do with this, and will rotate and scale the links as well!

Here is a simple example of this method in action: http://codepen.io/bvisness/pen/pgrGBr

Upvotes: 1

repzero

Reputation: 8412

Below are the global attributes for <map> and don't think It is what you need to do the job.

accesskey
class
contenteditable
contextmenu

data-*  
dir     
draggable   
dropzone    
hidden  
id  
lang    
spellcheck  
style   
tabindex    
title   
translate

Some of my observations:

You cannot add a width and height value to the tag itself

The map tag changes its width and height if the width and height of the image it is linked to changes (see snippet)

It is unable to position itself absolute as a background (see snippet)

the cursor only changes to a link in the upper left corner of the map

img {
 border:solid;
width:100% ;
height:100%;
}

map {
position:absolute;
}

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
</map>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRTNx0KWm64q1n3aTNvA6xilTrtDRgTI0wPlxb13mcNn55nahKw"  alt="Planets" usemap="#planetmap">



</body>
</html>

possible Solution:

Add a background to the body

use viewport measurements to allow the body to occupy entire screen (one way)

add an onclick event to the body so that when you click the body, you will be redirected

Snippet Here

body{
  position:relative;
  background:url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQfqyqPka3zuGaR9sVDXDcfHMyNrLQnz3QFkaXcWCc8WX_S_14R");
  background-size:cover;
  border:solid;
  display:block;

  margin:auto;
  width:100wh;
  height:100vh;
  cursor:pointer
}

#full_blown{
  width:100wh;
  height:100vh;
}

<body onclick="location.href='www.google.com'"></body>
<h1>THIS IS SOME </h1>
<p>
There was a cow called boy
</p>

Upvotes: 0

Image map a background image?

Answers (2)

Related Questions