Javascript传递

Question

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

我创建了一组放置在背景图像上的翻转。它工作正常。鼠标悬停是一个 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 { ... }


      }

不幸的是，这也没有用。我在这里缺少什么？

//已编辑

Answer 1

为什么要使用 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.