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