使用css，jquery/javascript數組或開關創建警報

Question

我正在做一些試驗。所以這對javascript專家來說可能看起來很糟糕。但我正在努力學習。

我有一個標題div，當用戶將鼠標放在每個縮略圖上時，它會顯示一個更大的圖像。我用jQuery來創建這個效果。標題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> 

這是我的CSS：

.container_12 .grid_4 { 
    width: 274px; 
    height: 370px; 
    background-color:#ccc; 
    border: 3px solid #999; 
    padding-left:10px; 
    padding-right:10px; 
    padding-bottom:10px; 
} 


#showImage{ 
margin: -170px 20px 80px 700px; 
width: 176px; 
height: 48px; 
background:url(../images/showimage.jpg); 
position:relative; 
z-index:100; 
} 

.grid_4 img { 
position:relative; 
left:100px; 
top:20px; 
padding:0 0 60px 0; 
border:none; 

} 
.grid_4 p { 
position:relative; 
text-align:center; 
} 

p.text { 
font-family:Arial, Helvetica, sans-serif; 
font-size:.75em; 
color:#000; 
line-height:1.25em; 
font-weight:bold; 
} 


#12_header { 
display: inline; 
background-color:#e5e5e5; 
border: 3px solid #bfbfbf; 
height:225px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:; 
color:#000; 
font-weight:bold; 
line-height:1.2em; 

} 


.hc_left_pic { 
float:left; 
margin-top:15px; 
background-color:#e5e5e5; 
border: 3px solid #bfbfbf; 
width:935px; 
height:250px; 
} 

我希望我已經提供了足夠的信息來解決這個問題。

感謝

Answer 1

看來你有一點jQuery中的方式來學習，但我們都沒有在一個點上，我看到你的努力之上做的，你採取同樣的方法，我將有幾個多年前。做好了給我們一些代碼，它表明你不只是在尋找一個人做免費工作。做得好。

看到下面你想要什麼的jsfiddle。

注意：
我刪除了鏈接，因爲它們完全冗餘（或至少它們與您的返回false;）。
另外我已經註釋掉了所有的CSS。
http://jsfiddle.net/YAaFg/

玩得開心，

乾杯
查理

Answer 2

的問題是在你的showArtistname功能：它總是給變量一個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]); 
}

Answer 3

它可能不是你正在完成的，但我有made a demo，它簡單地將圖像複製到上面的較大區域。

的alert()走的是標題現有<img>元件，它可以讓你保持藝術家的名字作爲HTML的一部分，而不是保持HTML和JavaScript的屬性。它也更加符合語義的正確性，爲您的頁面提供更多內容，並且是更簡單的解決方案。

如果你需要顯示不同形象，而不僅僅是一個克隆，你可以作爲隱藏要素，無論上邊<div>裏面添加較大的圖像，並使用jQuery show()來取消隱藏圖像。

編輯：Updated demo將警報移動到點擊事件。這可以很容易地在頂部<img>本身click事件的或父<div>如果必要的話只是改變了選擇器$('#topImage img').click(function() {...});或$('#topImage').click(function() {...});