onclick

I am posting this question again because I was never able to get it working. I have a site http://theonlinebeatz.com/Test3.html (the bottom withe links are linkleble) I would like to make the full size picture linkable also... the portion of my code in question is:

<div class="ws_images">
 
<span onclick="new_win(1)"><img src="data1/images/80.jpg" alt="80" title="80" id="wows1"/ ></span>
<span onclick="new_win(2)"><img src="data1/images/disco_ball.jpg" alt="Disco ball" title="Disco ball" id="wows2"/></span>
<span onclick="new_win(3)"><img src="data1/images/latin.jpg" alt="latin" title="latin" id="wows3"/></span>
<span onclick="new_win(4)"><img src="data1/images/lips.jpg" alt="Lips" title="Lips" id="wows4"/></span>
<span onclick="new_win(5)"><img src="data1/images/merengue.jpg" alt="Merengue" title="Merengue" id="wows5"/></span>
<span onclick="new_win(6)"><img src="data1/images/music.jpg" alt="Music" title="Music" id="wows6"/></span>
<span onclick="new_win(7)"><img src="data1/images/rock.jpg" alt="rock" title="rock" id="wows7"/></span>
<span onclick="new_win(8)"><img src="data1/images/rockband.jpg" alt="rockband" title="rockband" id="wows8"/></span>
<span onclick="new_win(9)"><img src="data1/images/Salsa.jpg" alt="Salsa" title="salsa" id="wows9"/></span>

</div>

Open in new window

The full website code is below. Please help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<meta http-equiv="Pragma" CONTENT="no-cache"; charset=iso-8859-1" />
	<title>TheOnlineBeatz</title>
	<link rel="stylesheet" type="text/css" href="style3.css">
 
<script language="JavaScript"> 
var links = new Array("http://theonlinebeatz.com/Music/IBachata.html","http://theonlinebeatz.com/Music/Isalsa.html",
                        "http://theonlinebeatz.com/Music/I80.html","http://theonlinebeatz.com/Music/Iclub.html",
                        "http://theonlinebeatz.com/music/Isoul.html","http://theonlinebeatz.com/Music/Ihiphop.html",
                        "http://Theonlinebeatz.com/Music/Iclasic.html", "http://theonlinebeatz.com/Music/IDisco.html",
                        "http://theonlinebeatz.com/Music/Ireggeaton.html","http://theonlinebeatz.com/Music/IPOP.html",
                        "http://theonlinebeatz.com/Music/ISPanishRock.html","http://theonlinebeatz.com/Music/IFreeStyle.html");
function new_win(pagetype)
{
    window.open(links[pagetype-1],"Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
}
 
</script>
 
 
<title>WOWSlider generated by WOWSlider.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="WOW Slider, jQuery Carousel Light, jQuery Carousel Demo" />
<meta name="description" content="WOWSlider created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css"/>
<style type="text/css">a#vlb{display:none}</style>
<script type="text/javascript" src="engine1/jquery.js"></script>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<!-- End WOWSlider.com HEAD section -->
 
</head>
 
<body>
<div id="container">
<div id="menu">
 
<ul>
	    <li id="m01"><a href="http://www.TheonlineBeatz.com">Home</a></li>
		<li id="m02"><a href="http://www.TheonlineBeatz.com/Playlist.html">PlayList</a></li>
		<li id="m03"><a href="http://www.TheonlineBeatz.com/ListenLive.html">Listen Live</a></li>
		<li id="m04"><a href="http://www.TheonlineBeatz.com/Contactus.html">Contact Us</a></li>
		<li id="m05"><a href="http://www.TheonlineBeatz.com/Aboutus.html">About Us</a></li>
</ul>
 
</div>
<div id="header">
<div id="dj" align="center">
 
 
<!-- Start WOWSlider.com BODY section -->
<!-- Center big pictures click not working -->
 
<div id="wowslider-container1">
<div class="ws_images">
 
<span onclick="new_win(1)"><img src="data1/images/80.jpg" alt="80" title="80" id="wows1"/ ></span>
<span onclick="new_win(2)"><img src="data1/images/disco_ball.jpg" alt="Disco ball" title="Disco ball" id="wows2"/></span>
<span onclick="new_win(3)"><img src="data1/images/latin.jpg" alt="latin" title="latin" id="wows3"/></span>
<span onclick="new_win(4)"><img src="data1/images/lips.jpg" alt="Lips" title="Lips" id="wows4"/></span>
<span onclick="new_win(5)"><img src="data1/images/merengue.jpg" alt="Merengue" title="Merengue" id="wows5"/></span>
<span onclick="new_win(6)"><img src="data1/images/music.jpg" alt="Music" title="Music" id="wows6"/></span>
<span onclick="new_win(7)"><img src="data1/images/rock.jpg" alt="rock" title="rock" id="wows7"/></span>
<span onclick="new_win(8)"><img src="data1/images/rockband.jpg" alt="rockband" title="rockband" id="wows8"/></span>
<span onclick="new_win(9)"><img src="data1/images/Salsa.jpg" alt="Salsa" title="salsa" id="wows9"/></span>
</div>
<br>
<br>
 
 
 
<!-- Bullets working o.k -->
<div class="ws_bullets"><div>
<a href="#wows1" title="80" onclick="new_win(1)" /><img src="data1/tooltips/80.jpg" alt="80"/></a>
<a href="#wows2" title="Disco ball" onclick="new_win(2)"><img src="data1/tooltips/disco_ball.jpg" alt="Disco ball"/></a>
<a href="#wows3" title="latin" onclick="new_win(3)"><img src="data1/tooltips/latin.jpg" alt="latin"/></a>
<a href="#wows4" title="Lips" onclick="new_win(4)"><img src="data1/tooltips/lips.jpg" alt="Lips"/></a>
<a href="#wows5" title="Merengue" onclick="new_win(4)"><img src="data1/tooltips/merengue.jpg" alt="Merengue"/></a>
<a href="#wows6" title="Music" onclick="new_win(6)"><img src="data1/tooltips/music.jpg" alt="Music"/></a>
<a href="#wows7" title="rock" onclick="new_win(7)"><img src="data1/tooltips/rock.jpg" alt="rock"/></a>
<a href="#wows8" title="rockband" onclick="new_win(8)"><img src="data1/tooltips/rockband.jpg" alt="rockband"/></a>
<a href="#wows9" title="salsa" onclick="new_win(9)"><img src="data1/tooltips/salsa.jpg" alt="salsa"/></a>
 
</div>
</div>
<a style="display:none" href="http://wowslider.com">jQuery Carousel Tabs by WOWSlider.com v1.9</a>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/script.js"></script>
 
<!-- End WOWSlider.com BODY section -->
 
 
 
</div>
<div class="clear"></div>
</div>
 
<div id="middle"></div>
<div id="middle2"></div>
 
<div id="footer"><p></div>
</div>
</body>
</html>

Open in new window


Zirwo01Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

pritamduttCommented:
After code inspection it appears that you are using jQuery based WowSlider application and since the large image is displayed in dynamically generated DIV, the links specified in span would not work.

You could look for parameters to WowSlider for specifying links. I saw one such option on the WowSlider Home Page.
0
EyalCommented:
try to add this at the end of script.js

JQuery('body div div[2] div div div[4]').css('z-index',0)
0
Zirwo01Author Commented:
can u please post the code Eyal?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

EyalCommented:
do better...

in script.js

change

jQuery("#wowslider-container1").wowSlider({effect:"fade",prev:"",next:"",duration:3*100,delay:28*100,outWidth:480,outHeight:360,width:480,height:360,autoPlay:false,stopOnHover:true,loop:false,bullets:true,caption:true,controls:true});

to
jQuery("#wowslider-container1").wowSlider({effect:"fade",prev:"",next:"",duration:3*100,delay:28*100,outWidth:480,outHeight:360,width:480,height:360,autoPlay:false,stopOnHover:true,loop:false,bullets:true,caption:true,controls:true,preventCopy:false});
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Zirwo01Author Commented:
where do i pu this?
0
Zirwo01Author Commented:
Thanks it works!
0
Zirwo01Author Commented:
Thanks u are the best
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.