| Autor | Zpráva | ||
|---|---|---|---|
| vacjos Profil * |
#1 · Zasláno: 9. 6. 2010, 19:42:20
Ahoj,
mám dotaz zda a jak udělat, aby např. při stisknutí tlačítka se spustila funkce, která by zobrazila/skryla u všech obrázků na dané stránce jejich title. Umístila ho vždy v horním levém rohu u každého obrázku. A navíc, pokud by byl popisek delší než je šířka obrázku, tak aby se zalomil podle velikosti obrázku, prostě aby byl celý na něm. Půjde to a jak? Děkuji |
||
| vacjos Profil * |
#2 · Zasláno: 9. 6. 2010, 22:34:40
Tak už jsem něco vymyslel, ale nevim, jak získat padding obrázku pro správné umístění titulku nad obrázek a ne o padding obrázku vedle? dd.style.paddingLeft a dd.style.paddingTop mi nefungují:-(
Můj kód:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title></title>
<style type="text/css">
body { background-color: #123456; color: #ffffff; }
a { color: #ffffff; }
img { margin: 30px; padding: 10px; float: left; }
div.title { font: normal normal 9px/normal verdana,arial; background-color: #ffffff; color: #000000; }
</style>
</head>
<body>
<div>FOTOGRAFIE</div><a href="javascript:" onclick="img_title();return false;">>ZOBRAZ POPISEK<</a>
<br><br>
<img src="louka.jpg" title="FOTOGRAFIE FOTOGRAFIE FOTOGRAFIE FOTOGRAFIE FOTOGRAFIE" width="300">
<img src="louka.jpg" title="FOTOGRAFIE FOTOGRAFIE FOTOGRAFIE FOTOGRAFIE FOTOGRAFIE" width="200">
<img src="louka.jpg" title="FOTOGRAFIE FOTOGRAFIE FOTOGRAFIE FOTOGRAFIE FOTOGRAFIE" width="100">
<script language="JavaScript" type="text/javascript">
var titles = false;
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x) {curleft += obj.x;}
return curleft;
}
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y) {curtop += obj.y;}
return curtop;
}
function getImageWidth(img) {
if (img.width > 1) {return img.width;}
else {setTimeout('getImageWidth("'+img+'")',1);}
}
function img_title() {
var images = document.getElementsByTagName('img');
for (i = 0; i < images.length; i++){
var d = document.getElementById('title_'+i);
if (d) {document.getElementsByTagName('body')[0].removeChild(d);}
}
if (titles == false) {
titles = true;
for (i = 0; i < images.length; i++){
var dd = images[i];
var d = document.createElement("div");
d.style.position = "absolute";
d.style.width = getImageWidth(dd)+'px';
d.style.left = findPosX(dd)+'px';
d.style.top = findPosY(dd)+'px';
d.className = 'title';
d.id = 'title_'+i;
d.innerHTML = dd.title;
document.getElementsByTagName('body')[0].appendChild(d);
}
}
else {
titles = false;
for (i = 0; i < images.length; i++){
var d = document.getElementById('title_'+i);
if (d) {document.getElementsByTagName('body')[0].removeChild(d);}
}
}
}
function img_title_set() {
if (titles == true) {titles = false;img_title();}
}
window.onresize = img_title_set;
</script>
</body>
</html>
|
||
|
Časová prodleva: 14 let
|
|||
0