Javascript 图像上的标题文本

对不起，这是个新手问题。我想显示从我的服务器目录中随机拍摄的照片，并想显示与每个图像相关联的文本（同一目录中的txt文件。例如：1.jpg->1.txt；2.jpg->2.txt…）。我希望文本出现在图像上方，位于图像顶部的框架中，仅当鼠标悬停在图像上时

javascript代码、css和html代码可在此处找到：

html代码：

<img id="fullSize" onload="fixImage(this)" />
<div id="HOLDER">
<div id="theCaption"></div>
</div>
<img id="showImage" alt="random image" />

javascript代码：

我确信有一个比我现在使用的更干净/更智能的解决方案，但请记住，我是一个新手

我的问题：除了文本有时会根据鼠标位置消失之外，这几乎是可行的。我怎样才能解决这个问题

---

提前感谢您的帮助

我会将图像和标题放在同一个容器中。差不多

/* 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;
}

然而，你显然可以改变你的风格

---

编辑：这里是最后一个问题：部分问题是jQuery冲突，因此还有一个

jQuery.noConflict（）在头部
 多谢各位。但是，此解决方案将“标题”转换为类选择器，而不是id选择器。问题是我的javascript中有以下代码：document.getElementById（“caption”）.innerHTML=captionText；如果我使用：document.getElementByClassName（“theCaption”）.innerHTML=captionText；，它将不起作用；。。。如果使用jQuery，可以执行
$（'.caption'）.html（captionText）另外，我任意使用类。您可以使用
“id=caption”
。只需将样式从
.caption
更改为
#caption
，我尝试了使用#caption，但它不起作用。我相信这是因为您不能对出现在多个CSS声明中的项使用ID选择器，这是标题样式的情况…（我不知道关于jQuery的任何内容，在我的情况下实现起来容易吗？）有任何进一步的帮助提示吗？是的。看起来你做的工作太多了。我肯定会使用jQuery。这不是绝对必要的，但它会让你的生活更轻松。只需链接这里找到的google jquery库，我更喜欢使用1.7，因为他们用1.8放弃了对IE 8的支持。无论如何，链接它并使用
$（'.caption'）.html（captionText）
而不是
document.getElementById（“caption”）.innerHTML=captionText
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;
}

<div class="container">
    <img class="image" src="image.png" />
    <div class="caption">The caption</div>
</div>

.caption{position:relative; top:-20px; height:20px; display:none;}
.container:hover .caption{display:block;}