If I paste this into a tiddler:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>CSS Alternative for an Image Map</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #ABC;
color: #123;
font-family: verdana;
}
h1 {
margin-bottom: 20px;
text-align: center;
}
#cssimagemap {
background-image: url(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);
}
</style>
</head>
<body>
<h1>CSS Alternative for an Image Map</h1>
<div id="cssimagemap">
<figcaption>
Photo provided by Michael (aka moik) / ex_magician on Flickr</figcaption>
<a href="http://www.yahoo.com/
<view-source:http://www.yahoo.com/>" id="hiker1"></a>
<a href="http://www.bing.com/
<view-source:http://www.bing.com/>" id="hiker2"></a>
<a href="http://www.google.com/
<view-source:http://www.google.com/>" id="hiker3"></a>
</div>
</body>
</html>
I get a functioning three blocks that link outwardly, but no actual image.
The original code is from here:
http://www.sixminutessmarter.com/demofiles/webdev/image-map-css-alternative.html
if I copy the image location
(http://www.sixminutessmarter.com/demofiles/webdev/images/photos/hikers.jpg)
and paste it in to here:
background-image: url(images/photos/hikers.jpg);
it still doesn't work.
tried:
background-image:
url(http://www.sixminutessmarter.com/demofiles/webdev/images/photos/hikers.jpg);
&
background-image:
http://www.sixminutessmarter.com/demofiles/webdev/images/photos/hikers.jpg;
Any suggestions to get this to work?
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/c002bbb1-5d56-4333-a338-992b767c0fe1%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
