[英]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為您提供幫助!!
我會將圖像和標題放在同一容器中。 就像是
<div class="container">
<img class="image" src="image.png" />
<div class="caption">The caption</div>
</div>
和在CSS
.caption{position:relative; top:-20px; height:20px; display:none;}
.container:hover .caption{display:block;}
您顯然可以樣式化。
編輯:這是最后的小提琴: http : //jsfiddle.net/ES22a/5問題的一部分是jQuery沖突,所以也有jQuery.noConflict();
在頭上。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.