使用css、jquery/javascript数组或开关创建警报

我正在做一些实验。因此，对于这里的javascript专家来说，这可能很糟糕。但我正在努力学习

我有一个标题div，当用户将鼠标移到每个缩略图上时，它会显示一个更大的图像。我使用jQuery创建了这种效果。header div包含一个按钮。单击按钮后，将弹出一个警报，告知用户图像的艺术家姓名。该按钮连接到段落的ID。问题是，我的代码不起作用。我不想使用“onclick”内联javascript（我正在使用它来调用showArtistname（）函数）。我想要像jQuery那样不引人注目的javascript。我不知道该怎么做。我不知道我是否应该使用数组，或者我是否正确地处理了这个问题。嗯，这是不对的，因为它不起作用

以下是我的jQuery代码：

$(function(){
$("a:has(img.small)").mouseover(function(){
var bigImage= $(this).attr("href");
$("#heading").attr({src: bigImage});
return false;
});

});

以下是我的javascript代码：

function showArtistname(){ 

var a = document.getElementById   ("bluesails", "purplemountains", "bigsky", "nightlights", "fireysunset", "brilliantsunrise").innerHTML;


switch(a) {
case "bluesails":
    alert("Arthur MacKenzie")
    break
case "purplemountains":
    alert("Maggie Laing")
    break

case "bigsky":
    alert("Arthur MacKenzie")
    break

case "nightlights":
    alert("Aria Soriano")
    break

case "fireysunset":
    alert("Felix Buckley")
    break

case "brilliantsunrise":
    alert("Felix Buckley")

}
}

这是我的HTML：

<div class="container_12" id="_container">

<div class="grid_12" id="12_header" > 

    <div class="hc_left_pic"> <img src="images/01_md.jpg" id="heading" alt="Big Image." />
 <div id="showImage" onclick="showArtistname()"></div>
  </a></div> 
</div>



<div class="clear"></div> 




<div class="grid_4" id="artist_container1">
<a href="images/01_md.jpg"><img src="images/01_sm.jpg" width="100" height="100" class="small" alt="Small image Blue Sails" /></a>    
    <p class="text" id="bluesails">Blue Sails</p>
</div>


<div class="grid_4" id="artist_container2">
<a href="images/02_md.jpg"><img src="images/02_sm.jpg" width="100" height="100" class="small" alt="Small Image Purple Mountains"/></a>
    <p class="text" id="purplemountains">Purple Mountains</p>
</div>


<div class="grid_4" id="artist_container3">
<a href="images/03_md.jpg"><img src="images/03_sm.jpg" width="100" height="100" class="small" alt="Small Image Big Sky"/></a>
    <p class="text" id="bigsky">Big Sky</p>
</div>


<div class="clear"></div>


<div class="grid_4" id="artist_container4">
<a href="images/04_md.jpg"><img src="images/04_sm.jpg" width="100" height="100" class="small" alt="Small Image Night Lights" /></a>
    <p class="text" id="nightlights">Night Lights</p>
</div>


 <div class="grid_4" id="artist_container5">
<a href="images/05_md.jpg"><img src="images/05_sm.jpg" width="100" height="100" class="small"  alt="Small Product Image Firey Sunset"/></a>
    <p class="text" id="fireysunset">Firey Sunset</p>
</div>


<div class="grid_4" id="artist_container6">
<a href="images/06_md.jpg"><img src="images/06_sm.jpg" width="100" height="100" class="small"  alt="Small Product Image Brilliant Sunrise"/></a>
    <p class="text" id="brilliantsunrise">Brilliant Sunrise</p>
</div>

我希望我已经提供了足够的信息来解决这个问题

---

谢谢

看来您在jQuery方面还有一些需要学习的地方，但我们都在某一点上学习过，我知道您在上面尝试了什么，并且您采用了几年前我所采用的方法。很好，给了我们一些代码，这表明你不只是找人做免费的工作。干得好

请参阅下面的一部分内容

注：
我删除了这些链接，因为它们是完全冗余的（或者至少它们与您的返回错误一起被删除）。
我还注释掉了所有css。

玩得开心

干杯

---

Charlie

在jQuery方面，您似乎有点需要学习，但我们都在某一点上学习过，我知道您在上面尝试了什么，并且采用了几年前的方法。很好，给了我们一些代码，这表明你不只是找人做免费的工作。干得好

请参阅下面的一部分内容

注：
我删除了这些链接，因为它们是完全冗余的（或者至少它们与您的返回错误一起被删除）。
我还注释掉了所有css。

玩得开心

干杯

---

Charlie

问题出在showArtistname函数中：它总是为变量a提供id为“bluesails”的元素的innerHtml

现在有很多可能的解决方案来实现你的目标。这是我的：

// JQuery part of the code
$(function(){
     $("a:has(img.small)").mouseover(function(){ 
        var bigImage= $(this).attr("href");
         $("#heading").attr({src: bigImage});
         $("#_container").attr({hoveredImage: $(this)});  // Extends your container div with a hoveredImage property, which returns the currently hovered image or undefined 
         return false;
     });
  });

// Plain JavaScript part of the code
oArtistNamesByImageId = {
"bluesails":        "Arthur MacKenzie",
"purplemountains":  "Maggie Laing",
"bigsky":           "Arthur MacKenzie",
"nightlights":      "Aria Soriano",
"fireysunset":      "Felix Buckley",
"brilliantsunrise": "Felix Buckley"
};

function showArtistname(){
    var img = document.getElementById("_container").hoveredImage;
    if(img)alert(oArtistNamesByImageId[img.id]);
}
//JQuery是代码的一部分
$（函数（）{
$（“a:has（img.small）”）.mouseover（function（）{
var bigImage=$（this.attr（“href”）；
$（“#heading”）.attr（{src:bigImage}）；
$（“##_container”）.attr（{hoveredImage:$（this）}）；//使用hoveredImage属性扩展容器div，该属性返回当前悬停的图像或未定义的图像
返回false；
});
});

//代码的纯JavaScript部分
oArtistNamesByImageId={
“蓝帆”：“亚瑟·麦肯齐”，
“紫山”：“玛姬·莱恩”，
“bigsky”：“Arthur MacKenzie”，
“夜灯”：“阿里亚·索里亚诺”，
“fireysunset”：“Felix Buckley”，
“灿烂的日出”：“菲利克斯·巴克利”
};

函数showArtistname（）{
var img=document.getElementById（“容器”）.hovereImage；
if（img）警报（oArtistNamesByImageId[img.id]）；
}

问题出在showArtistname函数中：它总是为变量a提供id为“bluesails”的元素的innerHtml

现在有很多可能的解决方案来实现你的目标。这是我的：

// JQuery part of the code
$(function(){
     $("a:has(img.small)").mouseover(function(){ 
        var bigImage= $(this).attr("href");
         $("#heading").attr({src: bigImage});
         $("#_container").attr({hoveredImage: $(this)});  // Extends your container div with a hoveredImage property, which returns the currently hovered image or undefined 
         return false;
     });
  });

// Plain JavaScript part of the code
oArtistNamesByImageId = {
"bluesails":        "Arthur MacKenzie",
"purplemountains":  "Maggie Laing",
"bigsky":           "Arthur MacKenzie",
"nightlights":      "Aria Soriano",
"fireysunset":      "Felix Buckley",
"brilliantsunrise": "Felix Buckley"
};

function showArtistname(){
    var img = document.getElementById("_container").hoveredImage;
    if(img)alert(oArtistNamesByImageId[img.id]);
}
//JQuery是代码的一部分
$（函数（）{
$（“a:has（img.small）”）.mouseover（function（）{
var bigImage=$（this.attr（“href”）；
$（“#heading”）.attr（{src:bigImage}）；
$（“##_container”）.attr（{hoveredImage:$（this）}）；//使用hoveredImage属性扩展容器div，该属性返回当前悬停的图像或未定义的图像
返回false；
});
});

//代码的纯JavaScript部分
oArtistNamesByImageId={
“蓝帆”：“亚瑟·麦肯齐”，
“紫山”：“玛姬·莱恩”，
“bigsky”：“Arthur MacKenzie”，
“夜灯”：“阿里亚·索里亚诺”，
“fireysunset”：“Felix Buckley”，
“灿烂的日出”：“菲利克斯·巴克利”
};

函数showArtistname（）{
var img=document.getElementById（“容器”）.hovereImage；
if（img）警报（oArtistNamesByImageId[img.id]）；
}

这可能并不完全是你想要的，但我有一个简单的克隆图像悬停在上面更大的区域

alert（）

采用了现有

元素的title属性，该元素允许您将艺术家名称保留为HTML的一部分，而不必维护HTML和JavaScript。它在语义上更为正确，为页面提供了更丰富的内容，是一个更简单的解决方案

如果需要显示不同的图像而不仅仅是克隆图像，可以将较大的图像作为隐藏元素添加到顶部

中，并使用jQuery取消隐藏图像

---

编辑：将警报移动到单击事件中。如果需要，只需将选择器更改为

$（'#topImage img'），就可以轻松地在顶部
本身或其父级
上单击事件

或

$（'#topImage'）。单击（函数（）{…}）
这可能不完全是你想要的，但我有一个简单的克隆图像被悬停到上面更大的区域

alert（）
采用了现有
元素的title属性，该元素允许您将艺术家名称保留为HTML的一部分，而不必维护HTML和JavaScript。它在语义上更为正确，为页面提供了更丰富的内容，是一个更简单的解决方案

如果需要显示不同的图像而不仅仅是克隆图像，可以将较大的图像作为隐藏元素添加到顶部
中，并使用jQuery取消隐藏图像

编辑：将警报移动到单击事件中。这很可能是一个cl