Mapped Image as Homepage with Hemingway Rewritten

  • Unknown's avatar
    tashdaniels · Member ·

    Hi –

    I would like a mapped image as my homepage, rather than the standard page. I’m happy with Hemingway Rewritten as the theme, but for the homepage, I really want a static, mapped image to click through to Hemingway Rewritten pages.

    I have Premium… if this helps.

    Is this possible?

    Thanks in advance!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    Exactly what do you mean by a mapped image please?

    Are you referring to deceptively linking a header image on your blog at http://natashadaniels.co.uk/ to an external site?

    Please clarify.

  • kathrynwp · Staff ·

    You should be able to use an image map within a post or page, but you’ll need to build it yourself and copy-paste the code in the Text view in the editor. Here are some resources:

    http://www.image-maps.com/
    https://shongjog.wordpress.com/2010/09/29/how-to-add-image-maps-in-a-wordpress-com-blog/

    Let me know if you have any other questions.

  • Unknown's avatar
    ajbraithwaite2015 · Member ·

    I have this and it is working, to a point. I’ve used CSS to make position: relative when in the image but when the site is viewed on a device with a smaller resolution (i.e. iPad – Portrait, or phone) the image is shrunk for the client and the image map is now way off.

    Is there any way to control this, or to force the image to display at full resolution?

  • kathrynwp · Staff ·

    ajbraithwaite2015 – that makes sense, as the image coordinates would change as the image gets smaller on mobile devices. I can’t think of a way around this, as you can target CSS for different screen sizes using media queries, but since image maps are not CSS, that wouldn’t work. Image maps actually have a lot of drawbacks for accessibility and SEO so my suggestion would be to consider an alternative form of navigation.

  • Unknown's avatar
    ajbraithwaite2015 · Member ·

    Kathy.

    Thank you for your help.

    It wasn’t the answer I wanted :-( but you’ve saved me spending many hours chasing something that won’t work.

  • Unknown's avatar
    ajbraithwaite2015 · Member ·

    Sorry, I meant Kathryn.

  • kathrynwp · Staff ·

    No problem, I understand!

  • Unknown's avatar
    ajbraithwaite2015 · Member ·

    I may have found a way around this using CSS to resize href links as a % of the image size instead of using an index map. These links now work on compooters, tablets, iPads and the phones that we have tested.

    The bad news is that it doesn’t work under Internet Explorer.

    Assuming that you don’t change wordpress.com to direct all IE users to a Chrome download page :-) I’ll have to find a way that works for both When I have that minor issue fixed I’ll post a link and solution here.

  • Unknown's avatar
    ajbraithwaite2015 · Member ·

    There was a help in another thread on here that linked to a CSS implementation as an example.

    This site presents the actual links as a series of href tags and then sizes the touchblocks using CSS as a % of the image size. When the image is resized for smaller displays the touchblock is resized with it instead of being a fixed pixel reference.

    My CSS implementation was:

    /* Image map styles */
.issue7_2-toc-map {
	width: 100%;
	position: relative;
}

.issue7_2-toc-map img {
	display: block;
	width: 100%;
}

.issue7_2-toc-map a {
	display: block;
	position: absolute;
}

.issue7_2-toc-map a.p1 {
	left: 60.8%;
	top: 11.3%;
	width: 33.5%;
	height: 4.4%;
}

.issue7_2-toc-map a.p2 {
	left: 15%;
	top: 19.2%;
	width: 71%;
	height: 3.2%;
}

.issue7_2-toc-map a.p3 {
	left: 15%;
	top: 23.8%;
	width: 71%;
	height: 3.2%;
}

    etc etc

    and the HTML to call this was:

    <div class="issue7_2-toc-map">
<img class="aligncenter size-full wp-image-708" src="........ /issue-7-2-toc2.jpg" alt="Issue 7.2 ToC" width="780" height="780" border="0" />
<div class="hotspots">
<div title="Click for Editors Note">
<a href="........../editors-note/" class="p1"></a><b class="b1"></b></div>
<div title="Click for poet 1">
<a href="......../poet-1/" class="p2"></a><b class="b2"></b></div>
<div title="Click for poet 2">
<a href="......./poet-2/" class="p3"></a><b class="b3"></b></div>

    etc etc.

    I think the HTML <b> tags are superfluous but I haven’t removed them yet.

    You need to recalculate your image map boxes from x1,y1,x2,y2 coordinates to x1%,y1%,width%,height% coordinates which is a little tedious if you have lots of mapped points.

    This coding worked for PCs running Chrome or IE11, Macs running Chrome or Safari, iPads, Google tablets and the phones that we tried but the links did not work on PCs running earlier versions of IE.

    I hope this helps you out.
    Andy

  • The topic ‘Mapped Image as Homepage with Hemingway Rewritten’ is closed to new replies.