Imagemap pure css trial

Developer
Tom Hermans
Size
2,852 Kb
Views
10,120
  1. Imagemap pure css trial Previews
  2. Imagemap pure css trial HTML Codes
  3. Imagemap pure css trial CSS Codes

How do I make an imagemap pure css trial?

Stu Nicholls' example: http://www.cssplay.co.uk/articles/imagemap/examples/ten.html. What is a imagemap pure css trial? How do you make a imagemap pure css trial? This script and codes were developed by Tom Hermans on 09 December 2022, Friday.

Imagemap pure css trial Previews
IQ Test

Imagemap pure css trial - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>imagemap pure css trial</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <dl id="imap">
<dt><a id="title" href="#nogo" title="The Beatles">The Beatles</a></dt>
<dd id="picp"><a id="paul" title="Paul McCartney" href="#nogo"><span>Paul McCartney - Bass Guitar and Vocals<br><br>Paul McCartney's song, Yesterday, recently voted the most popular song of the century by a BBC poll, was initially composed without lyrics. Paul used the working title 'scrambled eggs' before coming up with the final words.</span></a></dd>
<dd id="picr"><a id="ringo" title="Ringo Starr" href="#nogo"><span>Ringo Starr - Drums<br><br>Dear Prudence was written by John and Paul about Mia Farrow's sister, Prudence, when she wouldn't come out and play with Mia and the Beatles at a religious retreat in India.</span></a></dd>
<dd id="picj"><a id="john" title="John Lennon" href="#nogo"><span>John Lennon - Guitar and Vocals<br><br>In 1962, The Beatles won the Mersyside Newspaper's biggest band in Liverpool contest principally because they called in posing as different people and voted for themselves numerous times.</span></a></dd>
<dd id="picg"><a id="george" title="George Harrison" href="#nogo"><span>George Harrison - Lead Guitar and Vocals<br><br>The Beatles' last public concert was held in San Francisco's Candlestick Park on August 29, 1966.</span></a></dd>
</dl>
</body>
</html>

Imagemap pure css trial - Script Codes CSS Codes

/* set up the font to be used for the page */
body {font-family: tahoma; arial, sans-serif;}
/* set the size of the definition list <dl> and add the background image */
#imap {display:block; width:400px; height:240px; background:url(https://www.cssplay.co.uk/articles/imagemap/images/beatles_basic.jpg) no-repeat; position:relative;}
/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {display:block; width:400px; height:0; padding-top:240px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(https://www.cssplay.co.uk/articles/imagemap/images/beatles_hover.jpg) no-repeat 400px 400px; cursor:default;}
/* the hack for IE pre IE6 */
* html #imap a#title {height:240px; he\ight:0;}
/* the <dt><a> hover style to move the background image to position 0 0*/
#imap a#title:hover {background-position: 0 0; z-index:10;}
/* place the <dd>s in the correct absolute position */
#imap dd {position:absolute; padding:0; margin:0;}
#imap #picp {left:36px; top:46px; z-index:20;}
#imap #picr {left:113px; top:76px; z-index:20;}
#imap #picj {left:192px; top:50px; z-index:20;}
#imap #picg {left:262px; top:60px; z-index:20;}
/* style the <dd><a> links physical size and the background image for the hover */
#imap a#paul, #imap a#ringo, #imap a#john, #imap a#george {display:block; width:85px; height:85px; background:transparent url(https://www.cssplay.co.uk/articles/imagemap/images/hover.gif) -100px -100px no-repeat; text-decoration:none; z-index:20;}
/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {display:none;}
/* move the link background image to position 0 0 when hovered */
#imap a#paul:hover, #imap a#ringo:hover, #imap a#john:hover, #imap a#george:hover {background-position:0 0;}
/* define the common styling for the span text */
#imap a:hover span {position:absolute; width:388px; display:block; font-family:arial; font-size:12px; background:#fff; color:#000; border:1px solid #000; padding:5px;}
/* the hack for IE pre IE6 */
* html #imap a:hover span {width:400px; w\idth:388px;}
/* move the span text to a common position at the bottom of the image map */
#imap a#paul:hover span {left:-36px; top:200px;}
#imap a#ringo:hover span {left:-113px; top:170px;}
#imap a#john:hover span {left:-192px; top:196px;}
#imap a#george:hover span {left:-262px; top:186px;}
/* add the style for the link span text - first line */
#imap a span:first-line {font-weight:bold; font-style:italic;}
#ads {margin-top:150px;}
Imagemap pure css trial - Script Codes
Imagemap pure css trial - Script Codes
Home Page Home
Developer Tom Hermans
Username tomhermans
Uploaded December 09, 2022
Rating 3
Size 2,852 Kb
Views 10,120
Do you need developer help for Imagemap pure css trial?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom Hermans (tomhermans) Script Codes
Name
CSS3 Shapes reference
Text in circle
Sticky Navigation
Simple circle cutout css
Responsive Form
Simple color ribbon
Table Row Toggle
Taming data tables
Snappy snippet try
Bulleted list with font-icon snippet
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!