[AmirParticipant]

Hello,

I realize that this might not be a simple task. I am really looking into creating an image map with multiple hotsopts. I found few tutorials on how to create and I believe I can achieve it by following their instructions, however, I do not know if they will work with X and how to place them into my blog.

One example: http://www.sixminutessmarter.com/demofiles/webdev/image-map-css-alternative.html
Tutorial: https://www.youtube.com/watch?v=_YGiMdnEud0

Second example: http://www.cssplay.co.uk/articles/imagemap/

Or could be achieved through adobe Dreamweaver maybe?

Could you please advice on this topic.

Thank you.

[Rue NelModerator]

Hello There,

Thanks for writing in!

You can simply apply the image map in your page. It would be much better if you create the page in Cornerstone. We’ll be taking this: http://www.sixminutessmarter.com/demofiles/webdev/image-map-css-alternative.html as an example.

Drag the raw content element into your page and insert this code:

<div id="cssimagemap">
	<figcaption>
Photo provided by Michael (aka moik) / ex_magician on Flickr</figcaption>
		<a href="http://www.yahoo.com/" id="hiker1"></a>
		<a href="http://www.bing.com/" id="hiker2"></a>
		<a href="http://www.google.com/" id="hiker3"></a>
    </div>

And in the settings tab, Settings > Custom CSS, you can insert this custom css:

#cssimagemap {
		background-image: url(http://www.sixminutessmarter.com/demofiles/webdev/images/photos/hikers.jpg);
		width: 640px;
		height: 631px;
		position: relative;
		}
		
	#cssimagemap a {
		display: block;
		border: 5px solid #333;
		position: absolute;
		}
		
	#cssimagemap a:hover {
		border: 5px solid #FF2;
		}
		
	a#hiker1 { width: 150px; height: 400px; left: 220px; top: 100px; }
	a#hiker2 { width: 60px; height: 170px; left: 400px; top: 100px; }
	a#hiker3 { width: 50px; height: 150px; left: 510px; top: 150px }
	
	#cssimagemap figcaption {
	position: absolute;
	top: 0px; left: 0px;
	width: 640px; height: 40px;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	background-color: rgba(255,255,255,.6);
	}

http://prntscr.com/9wpjlx

Hope this would help. Please let us know how it goes.

[AmirParticipant]

Hi.

Sorry for the late reply.

It went really well and I took it a notch further and added my style to it 😉

Still missing the finishing touches, but please have a look and would appreciate your point of view on it.

http://www.2-excel.com/tutorials-excel/excel-tutorial-1-layout/#nogo

Thanks

[AmirParticipant]

Hi again.

I realized that the speech bubble are not in the correct positions when opened on different browsers like Firefox.

Could you please advice on this issue.

Thanks

[Paul RModerator]

Hi Amir,

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[Author]

Posts