图片上的标题文字 [英] Caption text over an image

问题描述

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

javascript代码，css和html代码可以在这里找到：

http：// jsfiddle.net/Totoleheros/ES22a/

html代码：

 < img id =fullSizeonload =fixImage（this）/> 
< div id =HOLDER> 
< div id =theCaption>< / div> 
< / div> 
< img id =showImagealt =随机图片/> 
  

CSS code：

  / *第一种方式是隐藏文本* / 
 #theCaption {
 position：absolute; 
 width：200px; 
 height：331px; 
 filter：alpha（opacity = 0）; 
 -moz-opacity：0; 
 -khtml-opacity：0; 
 opacity：0; 
 z-index：3; 
} 
 / *发送样式是显示悬停时的文本* / 
 #theCaption：hover，#theCaption：active {
 position：absolute; 
 width：200px; 
 height：40px; 
 background-color：#eeeeee; 
颜色：＃000000; 
 overflow：hidden; 
 font-family：arial; 
 font-weight：normal; 
 filter：alpha（opacity = 80）; 
 -moz-opacity：0.8; 
 -khtml-opacity：0.8; 
不透明度：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代码：

 函数fixImage（image）{
 //我想要显示一幅200x331px的图像，该图像取自各种尺寸的图像目录
 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; //或者任何你选择的
 var rn = 1 + Math.floor（MAXPICTURENUMBER * Math.random（））; 
 //这里我指向包含图像和标题的目录
 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 =imagesrc =image.png/> 
< div class =caption>标题< / div> 
< / div> 
  

和css

  .caption {位置：相对;顶部：-20px;高度：20像素; display：none;} 
 .container：hover .caption {display：block;} 
  

你可以明显的风格。

编辑：这是最后的小提琴： http：// jsfiddle .net / ES22a / 5 问题的一部分是jQuery冲突，因此头部还有一个 jQuery.noConflict（）; 。

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!!

解决方案

I would put the image and the caption in the same container. Something like

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

and in css

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

you can obviously style however.

EDIT: here's the final fiddle: http://jsfiddle.net/ES22a/5 part of the problem was a jQuery conflict so there's also a jQuery.noConflict(); in the head.

这篇关于图片上的标题文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！