[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

onclick

Posted on 2011-10-05
8
Medium Priority
?
633 Views
Last Modified: 2012-05-12
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


0
Comment
Question by:Zirwo01
  • 4
  • 3
8 Comments
 
LVL 9

Expert Comment

by:pritamdutt
ID: 36922364
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
 
LVL 15

Expert Comment

by:Eyal
ID: 36922381
try to add this at the end of script.js

JQuery('body div div[2] div div div[4]').css('z-index',0)
0
 

Author Comment

by:Zirwo01
ID: 36922541
can u please post the code Eyal?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 15

Accepted Solution

by:
Eyal earned 2000 total points
ID: 36922543
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
 

Author Comment

by:Zirwo01
ID: 36922609
where do i pu this?
0
 
LVL 15

Expert Comment

by:Eyal
ID: 36922611
0
 

Author Comment

by:Zirwo01
ID: 36922619
Thanks it works!
0
 

Author Closing Comment

by:Zirwo01
ID: 36922622
Thanks u are the best
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month18 days, 21 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question