0

我有一个图像，我希望能够在其中指出某些区域并进行讨论。想象一张房间的图片，翻转窗户，文字会出现在图片下方。

我创建了一组放置在背景图像上的翻转。它工作正常。翻转是一个 CSS 伪元素 (.thisLink:hover)。

    <div class="thisLink t1" onMouseOver="describe('a1');" onMouseOut="hideMe();"></div>

我想要做的是 1. 当用户滚动图像时 2. 文本出现在 div 中的图像下方。

我可以从链接内部传递文本：onMouseOver="describe('Here's something interesting');" 将其写入 div 的 innerHTML 的函数。但由于描述可能很长，我正在考虑调用一个变量：

    function describe(txt){
      var a1="aaa ... aaa";
      var a2="bbb ... bbb";

      document.getElementByID('describe').innerHTML=txt;

所以鼠标悬停代码将是

      <div class= ... onMouseOver="describe('a1');" ... >

这将发送参数“a1”并调用变量 a1。然后将 T 文本“aaa ... aaa”写入 div。

没有这样的运气。我没有得到我想要的文本，而是得到了传递的参数“a1”或“a2”。

然后我尝试将它放在 if/else 子句中：

      function describe(txt){
        if (txt=a1){
            document.getElementById('describe').innerHTML="really important stuff";
        } else { ... }


      }

不幸的是，这也不起作用。我在这里想念什么？

// 已编辑

4

1 回答 1

0

为什么要使用 javascript 来实现这一点？我能想到使用它的唯一原因是，如果您想在图像悬停时使用 ajax 调用加载 div 的内容。但由于我在您的代码中没有看到类似的东西，我会说为了简单起见并使用 CSS。

HTML

<div id="hover">Test message</div>
<div id="image"><img src="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg"/></div>

CSS：

#hover {
    display: none; }

#image:hover + #hover {
    display: block;
}

jsfiddle：http: //jsfiddle.net/ZGCqk/

编辑：

如果您仍想使用 javascript，则发布的代码将不起作用，因为您在调用函数 (a1) 时发送的参数未在函数的参数 (txt) 中定义。我不是 javascript 方面的专家，但在以下范围内尝试更多：

function describe(v) {

    if (v == "imgA") {
        var newTEXT = "sometext1";
            var divIMG  = "div1"; // the div the content should be placed in
    } else if (v == "imgB") {
        var newTEXT = "sometext2";
            var divIMG  = "div2";
    }

document.getElementById(divIMG).innerHTML = newTEXT;
};

在您的 HTML 中：

onMouseOver="describe('imgA')"  // or imgB etc.
于 2013-08-30T23:53:18.870 回答