图片上的标题文字(Caption text over an image)

 对不起，这是一个新手问题。 我想显示从我的服务器目录中获取的随机图片，我想显示与每个图像相关的文本（同一目录中的txt文件。例如：1.jpg - > 1.txt; 2.jpg - > 2。文本...）。 我希望文本显示在图像上方，放在图像顶部的框架中，只有鼠标悬停在图像上。 
 
 可以在此处找到javascript代码，css和html代码： 
 
 http://jsfiddle.net/Totoleheros/ES22a/ 
 
 HTML代码： 
 
<img id="fullSize" onload="fixImage(this)" />
<div id="HOLDER">
<div id="theCaption"></div>
</div>
<img id="showImage" alt="random image" />
 
 CSS代码： 
 
/* The first style is to hide the text*/
#theCaption {
position: absolute;
width: 200px;
height: 331px;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
z-index: 3;
}
/*The send style is to show the text on hover*/
#theCaption:hover, #theCaption:active {
position: absolute;
width: 200px;
height: 40px;
background-color: #eeeeee;
color: #000000;
overflow: hidden;
font-family: arial;
font-weight: normal;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
z-index: 3;
font-size: 10px;
line-height: 0.9em;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
}
 
 javascript代码： 
 
function fixImage(image) {
// I want an to display an image of 200x331px taken from a directory of image of various dimensions
var show = document.getElementById("showImage");
if (image.height > image.width) {
    show.style.height = "331px";
    show.style.width = Math.round((image.width / image.height) * 331) + "px";
} else {
    show.style.width = "200px";
    show.style.height = Math.round((image.height / image.width) * 200) + "px";
}

show.src = image.src;
show.style.visibility = "visible";
}

var MAXPICTURENUMBER = 166; // or whatever you choose
var rn = 1 + Math.floor(MAXPICTURENUMBER * Math.random());
// Here I point to the directory containing the images and the caption
var url = "http://www.test.fr/Images/RandomPictures/" + rn + ".jpg";
var caption = "http://www.test.fr/Images/RandomPictures/" + rn + ".txt";

var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", caption, false);
xmlhttp.send();
captionText = xmlhttp.responseText;

window.onload = function () {
document.getElementById("theCaption").innerHTML = captionText;
document.getElementById("fullSize").src = url;
}
 
 我确信有一个比我使用的更清洁/更智能的解决方案，但请记住，我是一个新手。 
 
 我的问题：这几乎是有效的，除了文本有时会根据鼠标位置消失。 我该如何解决这个问题？ 
 
 Thkx提前为您提供帮助!! 

I am sorry, this a newbie question. I want to display random pictures taken from a directory of my server and I want to display a text associated to each image (txt files in the same directory. Example: 1.jpg -> 1.txt; 2.jpg -> 2.txt...). I want that the text appear above the image, in a frame placed on the top of the image, only upon mouse hover on the image.
 
The javascript code, css and html codes can be found here:
 
http://jsfiddle.net/Totoleheros/ES22a/
 
html code:
 
<img id="fullSize" onload="fixImage(this)" />
<div id="HOLDER">
<div id="theCaption"></div>
</div>
<img id="showImage" alt="random image" />
 
CSS code:
 
/* The first style is to hide the text*/
#theCaption {
position: absolute;
width: 200px;
height: 331px;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
z-index: 3;
}
/*The send style is to show the text on hover*/
#theCaption:hover, #theCaption:active {
position: absolute;
width: 200px;
height: 40px;
background-color: #eeeeee;
color: #000000;
overflow: hidden;
font-family: arial;
font-weight: normal;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
z-index: 3;
font-size: 10px;
line-height: 0.9em;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
}
 
javascript code:
 
function fixImage(image) {
// I want an to display an image of 200x331px taken from a directory of image of various dimensions
var show = document.getElementById("showImage");
if (image.height > image.width) {
    show.style.height = "331px";
    show.style.width = Math.round((image.width / image.height) * 331) + "px";
} else {
    show.style.width = "200px";
    show.style.height = Math.round((image.height / image.width) * 200) + "px";
}

show.src = image.src;
show.style.visibility = "visible";
}

var MAXPICTURENUMBER = 166; // or whatever you choose
var rn = 1 + Math.floor(MAXPICTURENUMBER * Math.random());
// Here I point to the directory containing the images and the caption
var url = "http://www.test.fr/Images/RandomPictures/" + rn + ".jpg";
var caption = "http://www.test.fr/Images/RandomPictures/" + rn + ".txt";

var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", caption, false);
xmlhttp.send();
captionText = xmlhttp.responseText;

window.onload = function () {
document.getElementById("theCaption").innerHTML = captionText;
document.getElementById("fullSize").src = url;
}
 
I am sure that there is a much cleaner/smarter solution than the one I am using, but remember, I'm a newbie.
 
My issue: this is almost working except that the text sometimes disappear according to the mouse position. How can I fix that?
 
Thkx in advance for your help!!

原文：https://stackoverflow.com/questions/21120486