The CSS should ideally be placed in an external style sheet - this adds one more obstacle to getting the images, but for this example the CSS is embedded in the <head> section of the page.
#gallery a {text-decoration: none; cursor: text; }
#gallery a:hover {color: maroon; } |
This sets the links in the container to have no underlines, and maroon hover colour. The other link colours a:link, a:visited, a:active are taken from the main page stylesheet.
cursor: text; hides the fact that the image is a hyperlink that fires a JavaScript event. |
#gallery p {clear: right; } |
This clears the right float set in images in previous paragraphs. |
#pic1,#pic2, #pic3 {
float: right;
position: relative;
background-repeat: no-repeat;
display: inline-block;
margin:0 1em 1em 1em;
}
|
This is the common CSS for all the "protected" images. In this example, the <span>s containing the images are floated to the right of their containing paragraph. A margin is applied around the <span> for appearance. The relative positioning allows the warning to be absolutely positioned within the <span>. Each image is represented here - #pic1, #pic2, #pic3 |
#pic1 {
background-image: url(/lightshade/images/_tnails/austin7_3_small.jpg);
width: 100px;
height: 64px;
}
|
Individual image settings - The protected image is the background for the <span>, and the size of the span made equal to the size of the image.
There is one entry for each protected image (total of three in this example).
|
#pic2 {
background-image: url(/lightshade/images/_tnails/frog_eye_3_small.jpg);
width: 100px;
height: 64px;
}
|
#pic3 {
background-image: url(/lightshade/images/_tnails/anglia_2_small.jpg);
width: 100px;
height: 68px;
}
|
.cwarn {
display: none;
position: absolute;
top: 0; left: 0;
font-weight: bold;
background: #eeeeee;
z-index:5;
}
|
The warning message is contained in a <span>. This styles the warning for each image, but since each warning is the same, a class can be used for all the warnings. |
| |
|