css image map

Dave

unread,

Mar 9, 2016, 5:33:38 PM3/9/16

to TiddlyWiki

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/" id="hiker1"></a>
                <a href="http://www.bing.com/" id="hiker2"></a>
                <a href="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?

c pa

unread,

Mar 9, 2016, 9:35:24 PM3/9/16

to TiddlyWiki

Dave,

I did the following on tiddlywiki.com and it worked

* Take the css out of the html and put it in a separate tiddler that is tagged "$:/tags/Stylesheet"
* Remove all the html stuff and have only the items

Dave

unread,

Mar 10, 2016, 2:02:01 PM3/10/16

to TiddlyWiki

Thank you, I'll give that a try :)

Dave

unread,

Nov 17, 2016, 12:06:05 AM11/17/16

to TiddlyWiki

Okay, 8 months later...

That definitely works. (Yay!)

How do I now assign an action more tiddlywiki-like to clicking on those areas (instead of going to the links)? Something like toggling a field value in some remote tiddler?

Reply all

Reply to author

Forward