onclick java script

Hello I have a website and been doing some modification but I am having some problems with the onlick that is rap in between <span> the second onclick work o.k>

<span onclick="new_win1()" /><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span> not working
<a href="#wows0" title="80" onclick="new_win1()" /><img src="data1/tooltips/80.jpg" alt="80"/></a> working

Can any one help

Here's the complete code of the page

<!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">
<!--
function new_win1()
{
    window.open("http://theonlinebeatz.com/Music/IBachata.html","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 -->

</style>
</head>

<body>
<div id="container">
      <div id="menu">

            <ul>
          <li id="m01"><a href="">Home</a></li>
            <li id="m02"><a href="">PlayList</a></li>
            <li id="m03"><a href="">Listen Live</a></li>
            <li id="m04"><a href="">Contact Us</a></li>
            <li id="m05"><a href="">About Us</a></li>
        </ul>
      
      </div>
      <div id="header">
      <div id="dj" align="center">
     
     <!-- Start WOWSlider.com BODY section -->
      <div id="wowslider-container1">
      <div class="ws_images">
<span onclick="new_win1()" /><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>

</div>
<br>
<br>
<div class="ws_bullets"><div>
<a href="#wows0" title="80" onclick="new_win1()" /><img src="data1/tooltips/80.jpg" alt="80"/></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>
  </div>
  <div id="footer">
<p></div>
</div>
</body>
</html>


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.

Pratima PharandeCommented:
try this

<span style="cursor:hand " onclick="new_win1()" /><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>
0
EyalCommented:
move the onclick to the image
0
Zirwo01Author Commented:
I tested this <span style="cursor:hand " onclick="new_win1()" /><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span> and no go
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.

Pratima PharandeCommented:
<img style="cursor:hand " onclick="new_win1()" src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ >
0
Kiran SonawaneProject LeadCommented:
Check this

<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<SCRIPT language="JavaScript">
$(document).ready(function(){
  $(".clsNewWindow").click(function(){
    new_win1();  
  });
});
<!--
function new_win1()
{
    window.open("http://theonlinebeatz.com/Music/IBachata.html","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 -->

</style>
</head>

<body>
<div id="container">
      <div id="menu">

            <ul>
          <li id="m01"><a href="">Home</a></li>
            <li id="m02"><a href="">PlayList</a></li>
            <li id="m03"><a href="">Listen Live</a></li>
            <li id="m04"><a href="">Contact Us</a></li>
            <li id="m05"><a href="">About Us</a></li>
        </ul>
      
      </div>
      <div id="header">
      <div id="dj" align="center">
     
     <!-- Start WOWSlider.com BODY section -->
      <div id="wowslider-container1">
      <div class="ws_images">
<span class="clsNewWindow" style="cursor:pointer;"/><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>

</div>
<br>
<br>
<div class="ws_bullets"><div>
<a href="#wows0" title="80" class="clsNewWindow" /><img src="data1/tooltips/80.jpg" alt="80"/></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>
  </div>
  <div id="footer">
<p></div>
</div>
</body>
</html>

Open in new window

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:
Do I use it in betwin span?

<img style="cursor:hand " onclick="new_win1()" src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ >
0
EyalCommented:
it's not a must
0
Pratima PharandeCommented:
yes you can

put onlcik on image itself
0
Zirwo01Author Commented:
sonawanekiran it works. now who do I do it if I want to add more picktures and more links is it posible?
0
Kiran SonawaneProject LeadCommented:
Yes. Just add class "clsNewWindow" to the element. Look at my code how added the class to span and image. Like

<span class="clsNewWindow" style="cursor:pointer;"/><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>
<a href="#wows0" title="80" class="clsNewWindow" /><img src="data1/tooltips/80.jpg" alt="80"/></a>
0
Zirwo01Author Commented:
grrrrrrrrr not sure what i did but is not working...,,,,
0
Kiran SonawaneProject LeadCommented:
Show your code
0
Kiran SonawaneProject LeadCommented:
And what you want to do?
0
EyalCommented:
<img onclick="foo()" src="..."/><img onclick="foo()" src="..."/><img onclick="foo()" src="..."/>....
0
Zirwo01Author Commented:
This is my test the.....http://www.theonlinebeatz.com/test.html

<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<SCRIPT language="JavaScript">
$(document).ready(function(){
  $(".clsNewWindow").click(function(){
    new_win1();  
  });
});
<!--
function new_win1()
{
    window.open("http://theonlinebeatz.com/Music/IBachata.html","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 -->

</style>
</head>

<body>
<div id="container">
      <div id="menu">

            <ul>
          <li id="m01"><a href="">Home</a></li>
            <li id="m02"><a href="">PlayList</a></li>
            <li id="m03"><a href="">Listen Live</a></li>
            <li id="m04"><a href="">Contact Us</a></li>
            <li id="m05"><a href="">About Us</a></li>
        </ul>
     
      </div>
      <div id="header">
      <div id="dj" align="center">
     
     <!-- Start WOWSlider.com BODY section -->
      <div id="wowslider-container1">
      <div class="ws_images">
<span class="clsNewWindow" style="cursor:pointer;"/><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>
</div>
<br>
<br>
<div class="ws_bullets"><div>
<a href="#wows0" title="80" class="clsNewWindow" /><img src="data1/tooltips/80.jpg" alt="80"/></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>
  </div>
  <div id="footer">
<p></div>
</div>
</body>
</html>


The original one. This one has more pictures on the carousel http://www.theonlinebeatz.com/carousel.html


<!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">
<!--
function new_win1()
{
    window.open("http://theonlinebeatz.com/Music/IBachata.html","Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
   
}


function new_win2()
{
    window.open("http://theonlinebeatz.com/Music/Isalsa.html","Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
   
 }

function new_win3()
{
    window.open("http://theonlinebeatz.com/Music/I80.html","Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
   
}

function new_win4()
{
    window.open("http://theonlinebeatz.com/Music/Iclub.html","Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
}

function new_win5()
{
    window.open("http://theonlinebeatz.com/music/Isoul.html","Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
}

function new_win6()
{
    window.open("http://theonlinebeatz.com/Music/Ihiphop.html","Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
}

function new_win7()
{
    window.open("http://Theonlinebeatz.com/Music/Iclasic.html","Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
 }

function new_win8()
{
    window.open("http://theonlinebeatz.com/Music/IDisco.html","Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
}
function new_win9()
{
    window.open("http://theonlinebeatz.com/Music/Ireggeaton.html","Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
}

function new_win10()
{
    window.open("http://theonlinebeatz.com/Music/IPOP.html","Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
}

function new_win11()
{
    window.open("http://theonlinebeatz.com/Music/ISPanishRock.html","Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
}

function new_win12()
{
    window.open("http://theonlinebeatz.com/Music/IFreeStyle.html","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 -->

</style>
</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 -->
      <div id="wowslider-container1">
      <div class="ws_images">
<span onclick="new_win1()" /><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>
<span onclick="new_win2()" /><img src="data1/images/disco_ball.jpg" alt="Disco ball" title="Disco ball" id="wows1"/></span>
<span onclick="new_win3()" /><img src="data1/images/latin.jpg" alt="latin" title="latin" id="wows2"/></span>
<span onclick="new_win4()" /><img src="data1/images/lips.jpg" alt="Lips" title="Lips" id="wows3"/></span>
<span onclick="new_win5()" /><img src="data1/images/merengue.jpg" alt="Merengue" title="Merengue" id="wows4"/></span>
<span onclick="new_win6()" /><img src="data1/images/music.jpg" alt="Music" title="Music" id="wows5"/></span>
<span onclick="new_win7()" /><img src="data1/images/rock.jpg" alt="rock" title="rock" id="wows6"/></span>
<span onclick="new_win8()" /><img src="data1/images/rockband.jpg" alt="rockband" title="rockband" id="wows7"/></span>
<span onclick="new_win9()" /><img src="data1/images/salsa.jpg" alt="salsa" title="salsa" id="wows8"/></span>
</div>
<br>
<br>
<div class="ws_bullets"><div>
<a href="#wows0" title="80" onclick="new_win1()" /><img src="data1/tooltips/80.jpg" alt="80"/></a>
<a href="#wows1" title="Disco ball" onclick="new_win2()"><img src="data1/tooltips/disco_ball.jpg" alt="Disco ball"/></a>
<a href="#wows2" title="latin" onclick="new_win3()"><img src="data1/tooltips/latin.jpg" alt="latin"/></a>
<a href="#wows3" title="Lips" onclick="new_win4()"><img src="data1/tooltips/lips.jpg" alt="Lips"/></a>
<a href="#wows4" title="Merengue" onclick="new_win5()"><img src="data1/tooltips/merengue.jpg" alt="Merengue"/></a>
<a href="#wows5" title="Music" onclick="new_win6()"><img src="data1/tooltips/music.jpg" alt="Music"/></a>
<a href="#wows6" title="rock" onclick="new_win7()"><img src="data1/tooltips/rock.jpg" alt="rock"/></a>
<a href="#wows7" title="rockband" onclick="new_win8()"><img src="data1/tooltips/rockband.jpg" alt="rockband"/></a>
<a href="#wows8" title="salsa" onclick="new_win9()"><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>
  </div>
  <div id="footer">
<p></div>
</div>
</body>
</html>
0
Zirwo01Author Commented:
Sorry for the long code
0
Kiran SonawaneProject LeadCommented:
Ok. Modifying your original code directly...
0
Zirwo01Author Commented:
Thanks......
0
EyalCommented:
first I would make the code shorter by passing parameter to functions

<!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 -->

</style>
</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 -->
      <div id="wowslider-container1">
      <div class="ws_images">
<span onclick="new_win(1)" /><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>
<span onclick="new_win(2)" /><img src="data1/images/disco_ball.jpg" alt="Disco ball" title="Disco ball" id="wows1"/></span>
<span onclick="new_win(3)" /><img src="data1/images/latin.jpg" alt="latin" title="latin" id="wows2"/></span>
<span onclick="new_win(4)" /><img src="data1/images/lips.jpg" alt="Lips" title="Lips" id="wows3"/></span>
<span onclick="new_win(5)" /><img src="data1/images/merengue.jpg" alt="Merengue" title="Merengue" id="wows4"/></span>
<span onclick="new_win(6)" /><img src="data1/images/music.jpg" alt="Music" title="Music" id="wows5"/></span>
<span onclick="new_win(7)" /><img src="data1/images/rock.jpg" alt="rock" title="rock" id="wows6"/></span>
<span onclick="new_win(8)" /><img src="data1/images/rockband.jpg" alt="rockband" title="rockband" id="wows7"/></span>
<span onclick="new_win(9)" /><img src="data1/images/salsa.jpg" alt="salsa" title="salsa" id="wows8"/></span>
</div>
<br>
<br>
<div class="ws_bullets"><div>
<a href="#wows0" title="80" onclick="new_win(1)" /><img src="data1/tooltips/80.jpg" alt="80"/></a>
<a href="#wows1" title="Disco ball" onclick="new_win(2)"><img src="data1/tooltips/disco_ball.jpg" alt="Disco ball"/></a>
<a href="#wows2" title="latin" onclick="new_win(3)"><img src="data1/tooltips/latin.jpg" alt="latin"/></a>
<a href="#wows3" title="Lips" onclick="new_win(4)"><img src="data1/tooltips/lips.jpg" alt="Lips"/></a>
<a href="#wows4" title="Merengue" onclick="new_win(5)"><img src="data1/tooltips/merengue.jpg" alt="Merengue"/></a>
<a href="#wows5" title="Music" onclick="new_win(6)"><img src="data1/tooltips/music.jpg" alt="Music"/></a>
<a href="#wows6" title="rock" onclick="new_win(7)"><img src="data1/tooltips/rock.jpg" alt="rock"/></a>
<a href="#wows7" title="rockband" onclick="new_win(8)"><img src="data1/tooltips/rockband.jpg" alt="rockband"/></a>
<a href="#wows8" 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>
  </div>
  <div id="footer">
<p></div>
</div>
</body>
</html>

Open in new window

0
Zirwo01Author Commented:
Thanks....but once again it only works on the small picture on the botom of the page. It dosent seem to work on the main one. Not sure what I am doing wrong.

http://theonlinebeatz.com/Test.html
0
Kiran SonawaneProject LeadCommented:
Try this
<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<SCRIPT language="JavaScript">
$(document).ready(function(){
  
  $("a[class^=I]").click(function(){
    new_win($(this).attr("class"));
  });
  
   $("span[class^=I]").click(function(){
    new_win($(this).attr("class"));
  });
  
});

function new_win(name)
{
    window.open("http://theonlinebeatz.com/Music/" +name+ ".html","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 -->

</style>
</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 -->
      <div id="wowslider-container1">
      <div class="ws_images">
<span class="IBachata" /><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>
<span class="Isalsa" /><img src="data1/images/disco_ball.jpg" alt="Disco ball" title="Disco ball" id="wows1"/></span>
<span class="I80" /><img src="data1/images/latin.jpg" alt="latin" title="latin" id="wows2"/></span>
<span class="Iclub" /><img src="data1/images/lips.jpg" alt="Lips" title="Lips" id="wows3"/></span>
<span class="Isoul" /><img src="data1/images/merengue.jpg" alt="Merengue" title="Merengue" id="wows4"/></span>
<span class="Ihiphop" /><img src="data1/images/music.jpg" alt="Music" title="Music" id="wows5"/></span>
<span class="Iclasic" /><img src="data1/images/rock.jpg" alt="rock" title="rock" id="wows6"/></span>
<span class="IDisco" /><img src="data1/images/rockband.jpg" alt="rockband" title="rockband" id="wows7"/></span>
<span class="Ireggeaton" /><img src="data1/images/salsa.jpg" alt="salsa" title="salsa" id="wows8"/></span>
</div>
<br>
<br>
<div class="ws_bullets"><div>
<a href="#wows0" title="80" class="IBachata" /><img src="data1/tooltips/80.jpg" alt="80"/></a>
<a href="#wows1" title="Disco ball" class="Isalsa"><img src="data1/tooltips/disco_ball.jpg" alt="Disco ball"/></a>
<a href="#wows2" title="latin" class="I80"><img src="data1/tooltips/latin.jpg" alt="latin"/></a>
<a href="#wows3" title="Lips" class="Iclub"><img src="data1/tooltips/lips.jpg" alt="Lips"/></a>
<a href="#wows4" title="Merengue" class="Isoul"><img src="data1/tooltips/merengue.jpg" alt="Merengue"/></a>
<a href="#wows5" title="Music" class="Ihiphop"><img src="data1/tooltips/music.jpg" alt="Music"/></a>
<a href="#wows6" title="rock" class="Iclasic"><img src="data1/tooltips/rock.jpg" alt="rock"/></a>
<a href="#wows7" title="rockband" class="IDisco"><img src="data1/tooltips/rockband.jpg" alt="rockband"/></a>
<a href="#wows8" title="salsa" class="Ireggeaton"><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>
  </div>
  <div id="footer">
<p></div>
</div>
</body>
</html>

Open in new window

0
EyalCommented:
you have closed the spans too early

instead of

<span onclick="new_win(1)" /><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>

do

<span onclick="new_win(1)" ><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>
0
Zirwo01Author Commented:
Thanks. I love how u made the code shorted. But is still not working. the link only works on the small picstures and not on the main one. is whay I am trying to do posible?

http://theonlinebeatz.com/test.html


<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<SCRIPT language="JavaScript">
$(document).ready(function(){
 
  $("a[class^=I]").click(function(){
    new_win($(this).attr("class"));
  });
 
   $("span[class^=I]").click(function(){
    new_win($(this).attr("class"));
  });
 
});

function new_win(name)
{
    window.open("http://theonlinebeatz.com/Music/" +name+ ".html","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 -->

</style>
</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 -->
      <div id="wowslider-container1">
      <div class="ws_images">
<span class="IBachata" /><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>
<span class="Isalsa" /><img src="data1/images/disco_ball.jpg" alt="Disco ball" title="Disco ball" id="wows1"/></span>
<span class="I80" /><img src="data1/images/latin.jpg" alt="latin" title="latin" id="wows2"/></span>
<span class="Iclub" /><img src="data1/images/lips.jpg" alt="Lips" title="Lips" id="wows3"/></span>
<span class="Isoul" /><img src="data1/images/merengue.jpg" alt="Merengue" title="Merengue" id="wows4"/></span>
<span class="Ihiphop" /><img src="data1/images/music.jpg" alt="Music" title="Music" id="wows5"/></span>
<span class="Iclasic" /><img src="data1/images/rock.jpg" alt="rock" title="rock" id="wows6"/></span>
<span class="IDisco" /><img src="data1/images/rockband.jpg" alt="rockband" title="rockband" id="wows7"/></span>
<span class="Ireggeaton" /><img src="data1/images/salsa.jpg" alt="salsa" title="salsa" id="wows8"/></span>
</div>
<br>
<br>
<div class="ws_bullets"><div>
<a href="#wows0" title="80" class="IBachata" /><img src="data1/tooltips/80.jpg" alt="80"/></a>
<a href="#wows1" title="Disco ball" class="Isalsa"><img src="data1/tooltips/disco_ball.jpg" alt="Disco ball"/></a>
<a href="#wows2" title="latin" class="I80"><img src="data1/tooltips/latin.jpg" alt="latin"/></a>
<a href="#wows3" title="Lips" class="Iclub"><img src="data1/tooltips/lips.jpg" alt="Lips"/></a>
<a href="#wows4" title="Merengue" class="Isoul"><img src="data1/tooltips/merengue.jpg" alt="Merengue"/></a>
<a href="#wows5" title="Music" class="Ihiphop"><img src="data1/tooltips/music.jpg" alt="Music"/></a>
<a href="#wows6" title="rock" class="Iclasic"><img src="data1/tooltips/rock.jpg" alt="rock"/></a>
<a href="#wows7" title="rockband" class="IDisco"><img src="data1/tooltips/rockband.jpg" alt="rockband"/></a>
<a href="#wows8" title="salsa" class="Ireggeaton"><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>
  </div>
  <div id="footer">
<p></div>
</div>
</body>
</html>
0
EyalCommented:
Try this...
<!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 -->

</style>
</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 -->
      <div id="wowslider-container1">
      <div class="ws_images">
<span onclick="new_win(1)" ><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>
<span onclick="new_win(2)" ><img src="data1/images/disco_ball.jpg" alt="Disco ball" title="Disco ball" id="wows1"/></span>
<span onclick="new_win(3)" ><img src="data1/images/latin.jpg" alt="latin" title="latin" id="wows2"/></span>
<span onclick="new_win(4)" ><img src="data1/images/lips.jpg" alt="Lips" title="Lips" id="wows3"/></span>
<span onclick="new_win(5)" ><img src="data1/images/merengue.jpg" alt="Merengue" title="Merengue" id="wows4"/></span>
<span onclick="new_win(6)" ><img src="data1/images/music.jpg" alt="Music" title="Music" id="wows5"/></span>
<span onclick="new_win(7)" ><img src="data1/images/rock.jpg" alt="rock" title="rock" id="wows6"/></span>
<span onclick="new_win(8)" ><img src="data1/images/rockband.jpg" alt="rockband" title="rockband" id="wows7"/></span>
<span onclick="new_win(9)" ><img src="data1/images/salsa.jpg" alt="salsa" title="salsa" id="wows8"/></span>
</div>
<br>
<br>
<div class="ws_bullets"><div>
<a href="#wows0" title="80" onclick="new_win(1)" /><img src="data1/tooltips/80.jpg" alt="80"/></a>
<a href="#wows1" title="Disco ball" onclick="new_win(2)"><img src="data1/tooltips/disco_ball.jpg" alt="Disco ball"/></a>
<a href="#wows2" title="latin" onclick="new_win(3)"><img src="data1/tooltips/latin.jpg" alt="latin"/></a>
<a href="#wows3" title="Lips" onclick="new_win(4)"><img src="data1/tooltips/lips.jpg" alt="Lips"/></a>
<a href="#wows4" title="Merengue" onclick="new_win(5)"><img src="data1/tooltips/merengue.jpg" alt="Merengue"/></a>
<a href="#wows5" title="Music" onclick="new_win(6)"><img src="data1/tooltips/music.jpg" alt="Music"/></a>
<a href="#wows6" title="rock" onclick="new_win(7)"><img src="data1/tooltips/rock.jpg" alt="rock"/></a>
<a href="#wows7" title="rockband" onclick="new_win(8)"><img src="data1/tooltips/rockband.jpg" alt="rockband"/></a>
<a href="#wows8" 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>
  </div>
  <div id="footer">
<p></div>
</div>
</body>
</html>

Open in new window

0
Kiran SonawaneProject LeadCommented:
Remove closing tag e.g

<span class="IBachata" /><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>

should be



<span class="IBachata" ><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>
0
Zirwo01Author Commented:
still nothing. Now I am getting broken links on the one that where workign before......I am just going to call it for tonigh and keep playing with it tomorow. Keep posting. Any help will be apriciated.... Below is the edit version code.

Thanks sonawanekiran and all the others.

http://theonlinebeatz.com/Test.html


<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<SCRIPT language="JavaScript">
$(document).ready(function(){
 
  $("a[class^=I]").click(function(){
    new_win($(this).attr("class"));
  });
 
   $("span[class^=I]").click(function(){
    new_win($(this).attr("class"));
  });
 
});

function new_win(name)
{
    window.open("http://theonlinebeatz.com/Music/"+name+".html","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 -->

</style>
</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 -->
      <div id="wowslider-container1">
      <div class="ws_images">
<span class="IBachata" ><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>
<span class="Isalsa" ><img src="data1/images/disco_ball.jpg" alt="Disco ball" title="Disco ball" id="wows1"/></span>
<span class="I80" ><img src="data1/images/latin.jpg" alt="latin" title="latin" id="wows2"/></span>
<span class="Iclub" ><img src="data1/images/lips.jpg" alt="Lips" title="Lips" id="wows3"/></span>
<span class="Isoul" ><img src="data1/images/merengue.jpg" alt="Merengue" title="Merengue" id="wows4"/></span>
<span class="Ihiphop" ><img src="data1/images/music.jpg" alt="Music" title="Music" id="wows5"/></span>
<span class="Iclasic" ><img src="data1/images/rock.jpg" alt="rock" title="rock" id="wows6"/></span>
<span class="IDisco" ><img src="data1/images/rockband.jpg" alt="rockband" title="rockband" id="wows7"/></span>
<span class="Ireggeaton" ><img src="data1/images/salsa.jpg" alt="salsa" title="salsa" id="wows8"/></span>
</div>
<br>
<br>
<div class="ws_bullets"><div>
<a href="#wows0" title="80" class="IBachata" /><img src="data1/tooltips/80.jpg" alt="80"/></a>
<a href="#wows1" title="Disco ball" class="Isalsa"><img src="data1/tooltips/disco_ball.jpg" alt="Disco ball"/></a>
<a href="#wows2" title="latin" class="I80"><img src="data1/tooltips/latin.jpg" alt="latin"/></a>
<a href="#wows3" title="Lips" class="Iclub"><img src="data1/tooltips/lips.jpg" alt="Lips"/></a>
<a href="#wows4" title="Merengue" class="Isoul"><img src="data1/tooltips/merengue.jpg" alt="Merengue"/></a>
<a href="#wows5" title="Music" class="Ihiphop"><img src="data1/tooltips/music.jpg" alt="Music"/></a>
<a href="#wows6" title="rock" class="Iclasic"><img src="data1/tooltips/rock.jpg" alt="rock"/></a>
<a href="#wows7" title="rockband" class="IDisco"><img src="data1/tooltips/rockband.jpg" alt="rockband"/></a>
<a href="#wows8" title="salsa" class="Ireggeaton"><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>
  </div>
  <div id="footer">
<p></div>
</div>
</body>
</html>
0
Zirwo01Author Commented:
When i try open a link with the java script below it gives me an error "page cannot be display

 window.open("http://theonlinebeatz.com/Music/"+name+".html","Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
}


this is the url displayed under properties http://theonlinebeatz.com/Music/IBachata%20ws_selbull%20ws_overbull.html
0
Zirwo01Author Commented:
o.k I got the bottom small icons links working but still the big picture is not.....

http://theonlinebeatz.com/Test.html

Any ideas or another way to open a window on a specific size?


<!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 -->

</style>
</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 -->
      <div id="wowslider-container1">
      <div class="ws_images">
<span onclick="new_win(1)" ><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>
<span onclick="new_win(2)" ><img src="data1/images/disco_ball.jpg" alt="Disco ball" title="Disco ball" id="wows1"/></span>
<span onclick="new_win(3)" ><img src="data1/images/latin.jpg" alt="latin" title="latin" id="wows2"/></span>
<span onclick="new_win(4)" ><img src="data1/images/lips.jpg" alt="Lips" title="Lips" id="wows3"/></span>
<span onclick="new_win(5)" ><img src="data1/images/merengue.jpg" alt="Merengue" title="Merengue" id="wows4"/></span>
<span onclick="new_win(6)" ><img src="data1/images/music.jpg" alt="Music" title="Music" id="wows5"/></span>
<span onclick="new_win(7)" ><img src="data1/images/rock.jpg" alt="rock" title="rock" id="wows6"/></span>
<span onclick="new_win(8)" ><img src="data1/images/rockband.jpg" alt="rockband" title="rockband" id="wows7"/></span>
<span onclick="new_win(9)" ><img src="data1/images/salsa.jpg" alt="salsa" title="salsa" id="wows8"/></span>
</div>
<br>
<br>
<div class="ws_bullets">
<div>
<a href="#wows0" title="80" onclick="new_win(1)" /><img src="data1/tooltips/80.jpg" alt="80"/></a>
<a href="#wows1" title="Disco ball" onclick="new_win(2)" /><img src="data1/tooltips/disco_ball.jpg" alt="Disco ball"/></a>
<a href="#wows2" title="latin" onclick="new_win(3)" /><img src="data1/tooltips/latin.jpg" alt="latin"/></a>
<a href="#wows3" title="Lips" onclick="new_win(4)" /><img src="data1/tooltips/lips.jpg" alt="Lips"/></a>
<a href="#wows4" title="Merengue" onclick="new_win(5)" /><img src="data1/tooltips/merengue.jpg" alt="Merengue"/></a>
<a href="#wows5" title="Music" onclick="new_win(6)" /><img src="data1/tooltips/music.jpg" alt="Music"/></a>
<a href="#wows6" title="rock" onclick="new_win(7)" /><img src="data1/tooltips/rock.jpg" alt="rock"/></a>
<a href="#wows7" title="rockband" onclick="new_win(8)" /><img src="data1/tooltips/rockband.jpg" alt="rockband"/></a>
<a href="#wows8" 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>
  </div>
  <div id="footer">
<p></div>
</div>
</body>
</html>
0
EyalCommented:
well...
you have div with opacity: 0; above the spans so the spans can't be clicked. remove the div it's not needed

this is the div code needed to be removed...
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10; background: none repeat scroll 0% 0% rgb(255, 255, 255); opacity: 0;"><a style="display: none; position: absolute; left: 0pt; top: 0pt; width: 100%; height: 100%;" href="#"></a></div>

Open in new window

0
Zirwo01Author Commented:
where is this at can u repaste the code with out it?
0
EyalCommented:
sure... here you go

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta charset="iso-8859-1&quot;" ;="" content="no-cache" http-equiv="Pragma">
      <title>TheOnlineBeatz</title>
      <link href="style3.css" type="text/css" rel="stylesheet">


<script language="JavaScript">
&lt;!--
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");
}

//--&gt;
</script>

      <title>WOWSlider generated by WOWSlider.com</title>
      <meta content="text/html; charset=utf-8" http-equiv="content-type">
      <meta content="WOW Slider, jQuery Carousel Light, jQuery Carousel Demo" name="keywords">
      <meta content="WOWSlider created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" name="description">
      <!-- Start WOWSlider.com HEAD section -->
      <link href="engine1/style.css" type="text/css" rel="stylesheet">
      <style type="text/css">a#vlb{display:none}</style>
      <script src="engine1/jquery.js" type="text/javascript"></script>
      <script src="engine1/wowslider.js" type="text/javascript"></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 align="center" id="dj">
     
   <!-- Start WOWSlider.com BODY section -->
      <div id="wowslider-container1">
      <div class="ws_images">
<span onclick="new_win(1)" style="font-size: 0px;"><img id="wows0" title="80" alt="80" src="data1/images/80.jpg" style="z-index: 1; position: absolute; visibility: visible;"></span>
<span onclick="new_win(2)" style="font-size: 0px;"><img id="wows1" title="Disco ball" alt="Disco ball" src="data1/images/disco_ball.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(3)" style="font-size: 0px;"><img id="wows2" title="latin" alt="latin" src="data1/images/latin.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(4)" style="font-size: 0px;"><img id="wows3" title="Lips" alt="Lips" src="data1/images/lips.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(5)" style="font-size: 0px;"><img id="wows4" title="Merengue" alt="Merengue" src="data1/images/merengue.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(6)" style="font-size: 0px;"><img id="wows5" title="Music" alt="Music" src="data1/images/music.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(7)" style="font-size: 0px;"><img id="wows6" title="rock" alt="rock" src="data1/images/rock.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(8)" style="font-size: 0px;"><img id="wows7" title="rockband" alt="rockband" src="data1/images/rockband.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(9)" style="font-size: 0px;"><img id="wows8" title="salsa" alt="salsa" src="data1/images/salsa.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<div style="position: absolute; right: 2px; bottom: 2px; padding: 0pt;"><a style="position: relative; display: block; background-color: rgb(228, 239, 235); color: rgb(131, 127, 128); font-family: Lucida Grande,sans-serif; font-size: 11px; font-weight: normal; font-style: normal; border-radius: 5px 5px 5px 5px; padding: 1px 5px; width: auto; height: auto; margin: 0pt; outline: medium none;" href="http://wowslider.com">WOWSlider.com</a></div></div>
<br>
<br>
<div class="ws_bullets"><div>
<a onclick="new_win(1)" title="80" href="#wows0" class="ws_selbull"></a>
<a onclick="new_win(2)" title="Disco ball" href="#wows1"></a>
<a onclick="new_win(3)" title="latin" href="#wows2"></a>
<a onclick="new_win(4)" title="Lips" href="#wows3"></a>
<a onclick="new_win(5)" title="Merengue" href="#wows4"></a>
<a onclick="new_win(6)" title="Music" href="#wows5"></a>
<a onclick="new_win(7)" title="rock" href="#wows6"></a>
<a onclick="new_win(8)" title="rockband" href="#wows7"></a>
<a onclick="new_win(9)" title="salsa" href="#wows8"></a>
<div class="ws_bulframe"><div><div style="width: 1000%;"><img alt="80" src="data1/tooltips/80.jpg"><img alt="Disco ball" src="data1/tooltips/disco_ball.jpg"><img alt="latin" src="data1/tooltips/latin.jpg"><img alt="Lips" src="data1/tooltips/lips.jpg"><img alt="Merengue" src="data1/tooltips/merengue.jpg"><img alt="Music" src="data1/tooltips/music.jpg"><img alt="rock" src="data1/tooltips/rock.jpg"><img alt="rockband" src="data1/tooltips/rockband.jpg"><img alt="salsa" src="data1/tooltips/salsa.jpg"></div></div><span></span></div></div></div>
<a href="http://wowslider.com" style="display:none">jQuery Carousel Tabs by WOWSlider.com v1.9</a>
      <div class="ws_shadow"></div>
      <a class="ws_next" href="#"></a><a class="ws_prev" href="#"></a><div style="" class="ws-title"><span>80</span></div></div>
      <script src="engine1/script.js" type="text/javascript"></script>
      <!-- End WOWSlider.com BODY section -->
             </div>
        <div class="clear"></div>
  </div>
      <div id="middle"></div>
      <div id="middle2">
        <div></div>
  </div>
  <div id="footer">
<p></p></div>
</div>

</body></html>

Open in new window

0
Zirwo01Author Commented:
I i tired this an paged loaded funky.

http://theonlinebeatz.com/Test.html
0
EyalCommented:
return to the old version I will try other solution
0
Zirwo01Author Commented:
done. is there pehaps another way we can acomplish this?
0
EyalCommented:
find z-index: 10;
and replace it with z-index: 0;
0
Zirwo01Author Commented:
on the origianl code or your?
0
EyalCommented:
current code

the div doesn't have id so I can't point you directly to it
0
Zirwo01Author Commented:
can u post it for me with the correct code?
0
EyalCommented:
use firebug and inspect the top element.
I assume the plugin is generating this div

here is the code that you should have in the end
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta charset="iso-8859-1&quot;" ;="" content="no-cache" http-equiv="Pragma">
      <title>TheOnlineBeatz</title>
      <link href="style3.css" type="text/css" rel="stylesheet">


<script language="JavaScript">
&lt;!--
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");
}

//--&gt;
</script>

      <title>WOWSlider generated by WOWSlider.com</title>
      <meta content="text/html; charset=utf-8" http-equiv="content-type">
      <meta content="WOW Slider, jQuery Carousel Light, jQuery Carousel Demo" name="keywords">
      <meta content="WOWSlider created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" name="description">
      <!-- Start WOWSlider.com HEAD section -->
      <link href="engine1/style.css" type="text/css" rel="stylesheet">
      <style type="text/css">a#vlb{display:none}
span img{cursor:pointer}</style>
      <script src="engine1/jquery.js" type="text/javascript"></script>
      <script src="engine1/wowslider.js" type="text/javascript"></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 align="center" id="dj">
     
   <!-- Start WOWSlider.com BODY section -->

      <div id="wowslider-container1">

<div class="ws_images">

<span onclick="new_win(1)" style="font-size: 0px;"><img id="wows0" title="80" alt="80" src="data1/images/80.jpg" style="z-index: 1; position: absolute; visibility: visible;"></span>
<span onclick="new_win(2)" style="font-size: 0px;"><img id="wows1" title="Disco ball" alt="Disco ball" src="data1/images/disco_ball.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(3)" style="font-size: 0px;"><img id="wows2" title="latin" alt="latin" src="data1/images/latin.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(4)" style="font-size: 0px;"><img id="wows3" title="Lips" alt="Lips" src="data1/images/lips.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(5)" style="font-size: 0px;"><img id="wows4" title="Merengue" alt="Merengue" src="data1/images/merengue.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(6)" style="font-size: 0px;"><img id="wows5" title="Music" alt="Music" src="data1/images/music.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(7)" style="font-size: 0px;"><img id="wows6" title="rock" alt="rock" src="data1/images/rock.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(8)" style="font-size: 0px;"><img id="wows7" title="rockband" alt="rockband" src="data1/images/rockband.jpg" style="position: absolute; display: none; visibility: visible;"></span>
<span onclick="new_win(9)" style="font-size: 0px;"><img id="wows8" title="salsa" alt="salsa" src="data1/images/salsa.jpg" style="position: absolute; display: none; visibility: visible;"></span>

<div style="position: absolute; right: 2px; bottom: 2px; padding: 0pt;"><a style="position: relative; display: block; background-color: rgb(228, 239, 235); color: rgb(131, 127, 128); font-family: Lucida Grande,sans-serif; font-size: 11px; font-weight: normal; font-style: normal; border-radius: 5px 5px 5px 5px; padding: 1px 5px; width: auto; height: auto; margin: 0pt; outline: medium none;" href="http://wowslider.com">WOWSlider.com</a></div></div>


<br>
<br>


<div class="ws_bullets">
<div>

<a onclick="new_win(1)" title="80" href="#wows0" class="ws_selbull"></a>
<a onclick="new_win(2)" title="Disco ball" href="#wows1" class=""></a>
<a onclick="new_win(3)" title="latin" href="#wows2"></a>
<a onclick="new_win(4)" title="Lips" href="#wows3"></a>
<a onclick="new_win(5)" title="Merengue" href="#wows4"></a>
<a onclick="new_win(6)" title="Music" href="#wows5"></a>
<a onclick="new_win(7)" title="rock" href="#wows6"></a>
<a onclick="new_win(8)" title="rockband" href="#wows7"></a>
<a onclick="new_win(9)" title="salsa" href="#wows8"></a>

<div class="ws_bulframe" style="display: none; left: -38px; opacity: 0;"><div><div style="width: 1000%; left: -180px;"><img alt="80" src="data1/tooltips/80.jpg"><img alt="Disco ball" src="data1/tooltips/disco_ball.jpg"><img alt="latin" src="data1/tooltips/latin.jpg"><img alt="Lips" src="data1/tooltips/lips.jpg"><img alt="Merengue" src="data1/tooltips/merengue.jpg"><img alt="Music" src="data1/tooltips/music.jpg"><img alt="rock" src="data1/tooltips/rock.jpg"><img alt="rockband" src="data1/tooltips/rockband.jpg"><img alt="salsa" src="data1/tooltips/salsa.jpg"></div></div><span></span></div></div>
</div>


<a href="http://wowslider.com" style="display:none">jQuery Carousel Tabs by WOWSlider.com v1.9</a>

<div class="ws_shadow"></div>

<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: none repeat scroll 0% 0% rgb(255, 255, 255); opacity: 0; z-index: 0;"><a style="display: none; position: absolute; left: 0pt; top: 0pt; width: 100%; height: 100%;" href="#"></a></div><a class="ws_next" href="#"></a><a class="ws_prev" href="#"></a><div style="" class="ws-title"><span>80</span></div></div>

<script src="engine1/script.js" type="text/javascript"></script>

<!-- End WOWSlider.com BODY section -->

</div>
        <div class="clear"></div>
  </div>
      <div id="middle"></div>
      <div id="middle2">
        <div></div>
  </div>
  <div id="footer">
<p></p></div>
</div>

 </body></html>

Open in new window

demo.jpg
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
HTML

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.