Create an alert using CSS, arrays or switch

Hi,

I’m doing some experimenting. So this may look bad to javascript experts here. But I’m trying to learn.

I have a header div that will show a larger image when the user mouses over each thumbnail image. I used jQuery to create this effect. The header div contains a button. Once the button is clicked, an alert will pop up to tell the user the artist’s name of image. The button is wired to an ID of a paragraph. Problem is, my code is not working. I don’t want to use “onclick” inline javascript (which is what I am using to call the showArtistname() function). I want unobtrusive javascript like jQuery is. I’m not sure how to do this. I don’t know if I should use an array or if I’m even approaching this correctly. Well, it’s not correct, because it’s not working…

Here is my code:


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

});
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")
			
}
} 

Here is the HTML:

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

  	<div class="grid_12" id="12_header" > 
    	
        <div class="hc_left_pic"> <img src="http://www.sitepoint.com/forums/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="http://www.sitepoint.com/forums/images/01_md.jpg"><img src="http://www.sitepoint.com/forums/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="http://www.sitepoint.com/forums/images/02_md.jpg"><img src="http://www.sitepoint.com/forums/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="http://www.sitepoint.com/forums/images/03_md.jpg"><img src="http://www.sitepoint.com/forums/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="http://www.sitepoint.com/forums/images/04_md.jpg"><img src="http://www.sitepoint.com/forums/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="http://www.sitepoint.com/forums/images/05_md.jpg"><img src="http://www.sitepoint.com/forums/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="http://www.sitepoint.com/forums/images/06_md.jpg"><img src="http://www.sitepoint.com/forums/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>

Here’s the 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;

}

I hope I’ve given enough information to get a solution to this.

Thanks