Within the outdated days, earlier than we thought a lot about internet requirements or the significance of accessibility, internet designers used picture maps to rapidly divide a single picture into areas, and hyperlink these areas to separate URLs. Conventional picture maps, although, don’t work nicely with text-only browsers, and so they aren’t as environment friendly or versatile as many more recent methods. You would possibly nonetheless discover them in use on an outdated internet web page or maybe some sort of complicated map, however most internet designers would take into account it an outdated approach. A lifeless one.
Article Continues Beneath
Whereas collaborating on a horror fiction internet venture, I made a decision early on that I’d do my greatest to code the location utilizing solely standards-based XHTML and CSS. When the opposite designer despatched me his idea for the location, I started to despair. He wished the web page to seem like an outdated weathered ebook, with tough edges and grungy textures. The thực đơn gadgets have been scattered concerning the web page. How may I flip a well-structured doc into one thing that seemed so natural?
I considered picture maps.
They have been horribly outdated, however a picture map would make issues a lot simpler than chopping the background picture into dozens of items and making an attempt to make use of CSS to sew it again collectively. It may need been loopy to consider utilizing them once more, however the the outdated methods appeared to carry the reply. I made a decision to return into the laboratory and see if I may use the fashionable science of CSS to carry this internet design approach again to life…
These are the info as we all know them#section2
To make our picture map, we’ll use CSS to create invisible hyperlinks and float them over the background picture wherever we want them to be.
First we create an outer div which will probably be used to use the background picture. Our hyperlinks will go inside a nested div to maintain our code organized and permit us to use kinds to the hyperlinks as a bunch. The nested div can even are available helpful when utilizing a method sheet switcher to create alternate CSS thực đơn results.
<div id="ebook"> <div id="thực đơn"> ... </div> </div>
The person hyperlinks can now be positioned inside our nested div. Giving every hyperlink its personal id permits us to independently place them on the web page. These separate ids additionally act as anchors, letting customers choose the hyperlinks instantly irrespective of the place they’re situated on the web page, or their capability to click on on them.
To make the textual content inside every hyperlink invisible, we have to add one other nested tag. I favor to make use of semantically meaningless <i> tags as a result of they supply visible clues to their presence within the absence of a stylesheet, which makes them simpler to work with. They’re additionally very quick, which helps with code effectivity. Nevertheless, you would definitely use <span>, <em>, or another tag for those who’d like. {Line wraps are marked ». –Ed.}
<div id="ebook"> <div id="thực đơn"> <a href="https://alistapart.com/article/imagemap/index.html" id="residence"><i>Residence</i></a> <a href="preface.html" id="preface"><i>Preface</i></a> <a href="tales.html" id="tales"><i>Tales</i></a> <a href="galleries.html" id="gallery"><i>Galleries<span class="linewrap">»</span> </i></a> <a href="boards.html" id="discussion board"><i>Discussion board</i></a> <a href="mementos.html" id="mementos"><i>Mementos<span class="linewrap">»</span> </i></a> <a href="credit.html" id="credit"><i>Credit</i></a> <a href="indicia.html" id="indicia"><i>Indicia</i></a> </div> </div>
That is the all of the XHTML that we want. You possibly can see the ends in Instance 1. We will now transfer on to creating the picture map impact with our stylesheet.
Guided by a grasp plan#section3
In your CSS file add a background coloration for the doc physique and set the margin and padding to 0. We’re going to be utilizing absolute positioning, and this can assist with our calculations.
physique {
background-color: #000;
margin: 0;
padding: 0;
}
The background for our picture map is utilized to the outer div. You must set an acceptable top and width to verify it’s totally displayed.
#ebook {
background-image: url(/d/imagemap/photos/<span
class="linewrap">»</span>
bookpages.jpg);
top: 595px;
width: 750px;
}
Any kinds that apply to nearly all of the hyperlinks could be outlined collectively. Extra particular CSS guidelines can then be used to change the attributes of particular person hyperlinks as required. Use absolute positioning and embrace a default top, width, and high place for all the hyperlinks. This can be a good time to verify the underlines are eliminated as nicely.
#thực đơn a {
place: absolute;
top: 38px;
width: 88px;
high: 31px;
text-decoration: none;
}
To cover the textual content inside hyperlinks whereas retaining “clickability,” we use a CSS selector to establish the italicized textual content inside the hyperlinks contained in our nested div, and its visibility is ready to hidden. It’s vital to incorporate significant hyperlink textual content, even when it will likely be invisible to nearly all of your customers. This ensures that your web site will probably be accessible for browsers that don’t assist CSS and customers who’re viewing it with an alternate stylesheet.
#thực đơn a i { visibility: hidden; }
As soon as the final CSS is in place, we are able to place every hyperlink individually. To enhance effectivity, hyperlinks that share a typical attribute equivalent to left or high, could be outlined collectively.
a#credit, a#indicia { high: 531px; }
a#residence { left: 101px; }
a#preface { left: 221px; }
a#tales { left: 311px; }
a#gallery { left: 431px; }
a#discussion board { left: 526px; width: 61px; }
a#mementos { left: 591px; width: 98px; }
a#credit { left: 431px; }
a#indicia { left: 591px; }
When utilized to the XHTML of our doc, the thực đơn hyperlinks will now float independently above our background picture. If we place them above areas of the picture that seem like hyperlinks, we’ll be all set. Putting your hyperlinks appropriately will normally take both cautious calculation or a little bit of trial and error.
CSS picture maps can use the :hover pseudo component to outline a separate model for every hyperlink’s rollover state. This enables us to drift new photos above the background every time the person strikes their mouse over one of many invisible hyperlink areas.
a#residence:hover { background-image: url(/d/imagemap/<span
class="linewrap">»</span>
photos/homeglow.jpg); }
a#preface:hover { background-image: url(/d/imagemap/<span
class="linewrap">»</span>
photos/prefaceglow.jpg); }
a#tales:hover { background-image: url(/d/imagemap/<span
class="linewrap">»</span>
photos/storiesglow.jpg); }
a#gallery:hover { background-image: url(/d/imagemap/<span
class="linewrap">»</span>
photos/galleryglow.jpg); }
a#discussion board:hover { background-image: url(/d/imagemap/<span
class="linewrap">»</span>
photos/forumglow.jpg); }
a#mementos:hover { background-image: url(/d/imagemap/<span
class="linewrap">»</span>
photos/mementosglow.jpg); }
a#credit:hover { background-image: url(/d/imagemap/<span
class="linewrap">»</span>
photos/creditsglow.jpg); }
a#indicia:hover { background-image: url(/d/imagemap/<span
class="linewrap">»</span>
photos/indiciaglow.jpg); }
A bug in Web Explorer that causes the rollover photos to chorus from disappearing as anticipated could be fastened by including border: none to the :hover state of all of the CSS picture map hyperlinks.
a#residence:hover,
a#preface:hover,
a#tales:hover,
a#gallery:hover,
a#discussion board:hover,
a#mementos:hover,
a#credit:hover,
a#indicia:hover { border: none; }
You possibly can see the ultimate outcomes of our CSS picture map in Instance 2.
Utilizing massive background photos isn’t bandwidth-friendly, however it might probably produce compelling designs and provides high-bandwidth guests a richer
visible expertise. As a result of CSS picture maps use standards-based XHTML, we may use a method sheet switcher to supply a low-bandwidth, alternate view of the location.
Particular because of Nate Piekos and Shane Clark for his or her work on Lifeless Ends, Massachusetts, the place the picture map and different darkish issues have been introduced again from the grave.