Надпись над изображением

Прошу прощения, это вопрос новичков. Я хочу отображать случайные снимки, взятые из каталога моего сервера, и я хочу отображать текст, связанный с каждым изображением (txt-файлы в том же каталоге. Пример: 1.jpg -> 1.txt; 2.jpg -> 2. текст…). Я хочу, чтобы текст появился над изображением, в рамке, помещенной в верхнюю часть изображения, только при наведении курсора мыши на изображение.

Коды javascript, css и html можно найти здесь:

http://jsfiddle.net/Totoleheros/ES22a/

html-код:

 
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 ​​за вашу помощь !!

Я бы поставил изображение и подпись в один и тот же контейнер. Что-то вроде

 
The caption

и в css

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

вы можете, очевидно, стиль.

EDIT: вот финальная скрипка: http://jsfiddle.net/ES22a/5 частью проблемы был конфликт jQuery, поэтому есть jQuery.noConflict(); в голове.