|
Dieses JavaScript erzeugt eine einfache Bildergallerie.
Autor: Jeremy Keith Licensed under: Creative Commons License
Leiterplatte 1
Leiterplatte 2
Leiterplatte 3
Choose an image to begin
in den <head> einfügen
<script type="text/javascript">
<!-- by Jeremy Keith -->
<!-- gefunden bei www-criptwelt.org -->
function showPic(whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
var previousToggle=null;
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block";
if(previousToggle)previousToggle.style.display="none";
previousToggle=e;
}
return true;
}
</script>
<style>
img {
border: none;
}
a {
outline: none;
}
li {
display:inline;
}
#desc {
font-style: italic;
}
</style>
in den <body>
<!-- Place the name (and path, if necessary) of the regular size images in the 'href' attribute. Do not give the size of this image. Place the name (and path, if necessary) of the smaller size images in the 'src' attribute. Place the descriptions in the 'title' attribute. Be sure to change the number of each paragraph, e.g., 'para1', 'para2', to match the image below. -->
<ul>
<li><a onclick="toggleMe('para1'); showPic(this); return false;" href="pix1.jpg" title="Hier kommt die Beschreibung des Biuldes rein."><img src="pix1-smaller.gif" width="50" height="38"></a></li>
<li><a onclick="toggleMe('para2'); showPic(this); return false;" href="pix2.jpg" title="Hier kommt die Beschreibung des Biuldes rein."><img src="pix2-smaller.gif" width="50" height="38"></a></li>
<li><a onclick="toggleMe('para3'); showPic(this); return false;" href="pix3.jpg" title="Hier kommt die Beschreibung des Biuldes rein."><img src="pix3-smaller.gif" width="50" height="38"></a></li>
</ul>
<div style="width: 400px; padding: 10px;">
<!-- Place the title of each image here. -->
<div id="para1" style="display:none; font-size: 1.2em; font-weight: 800;">Bildname 1 </div>
<div id="para2" style="display:none; font-size: 1.2em; font-weight: 800;">Bildname 2 </div>
<div id="para3" style="display:none; font-size: 1.2em; font-weight: 800;">Bildname 3 </div>
<!-- Place the name of any image you want to initially display here. Do not give the size of this image. -->
<img id="placeholder" src="blank.gif">
<div id="DivContent"></div>
<div id="desc">Choose an image to begin</div>
</div>
<!-- If you want the smaller images to display at the bottom, place the images in the list above (with the 'onclick' events) here. -->
|
