Start Free TrialLog in
Avatar of Zirwo01
Zirwo01

asked on 

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>


HTMLJScriptScripting Languages
Avatar of undefined
Last Comment
Eyal
Avatar of Pratima
Pratima
Flag of India image
try this

<span style="cursor:hand " onclick="new_win1()" /><img src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ ></span>
Avatar of Eyal
Eyal
Flag of Israel image
move the onclick to the image
Avatar of Zirwo01
Zirwo01

ASKER

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
Avatar of Pratima
Pratima
Flag of India image
<img style="cursor:hand " onclick="new_win1()" src="data1/images/80.jpg" alt="80" title="80" id="wows0"/ >
ASKER CERTIFIED SOLUTION
Avatar of Kiran Sonawane
Kiran Sonawane
Flag of India image
Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Zirwo01
Zirwo01

ASKER

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"/ >
Avatar of Eyal
Eyal
Flag of Israel image
it's not a must
Avatar of Pratima
Pratima
Flag of India image
yes you can

put onlcik on image itself
Avatar of Zirwo01
Zirwo01

ASKER

sonawanekiran it works. now who do I do it if I want to add more picktures and more links is it posible?
Avatar of Kiran Sonawane
Kiran Sonawane
Flag of India image
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>
Avatar of Zirwo01
Zirwo01

ASKER

grrrrrrrrr not sure what i did but is not working...,,,,
Avatar of Kiran Sonawane
Kiran Sonawane
Flag of India image
Show your code
Avatar of Kiran Sonawane
Kiran Sonawane
Flag of India image
And what you want to do?
Avatar of Eyal
Eyal
Flag of Israel image
<img onclick="foo()" src="..."/><img onclick="foo()" src="..."/><img onclick="foo()" src="..."/>....
Avatar of Zirwo01
Zirwo01

ASKER

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>
Avatar of Zirwo01
Zirwo01

ASKER

Sorry for the long code
Avatar of Kiran Sonawane
Kiran Sonawane
Flag of India image
Ok. Modifying your original code directly...
Avatar of Zirwo01
Zirwo01

ASKER

Thanks......
SOLUTION
Avatar of Eyal
Eyal
Flag of Israel image
Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Zirwo01
Zirwo01

ASKER

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
Avatar of Kiran Sonawane
Kiran Sonawane
Flag of India image
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

Avatar of Eyal
Eyal
Flag of Israel image
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>
Avatar of Zirwo01
Zirwo01

ASKER

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>
Avatar of Eyal
Eyal
Flag of Israel image
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

Avatar of Kiran Sonawane
Kiran Sonawane
Flag of India image
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>
Avatar of Zirwo01
Zirwo01

ASKER

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>
Avatar of Zirwo01
Zirwo01

ASKER

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
Avatar of Zirwo01
Zirwo01

ASKER

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>
Avatar of Eyal
Eyal
Flag of Israel image
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

Avatar of Zirwo01
Zirwo01

ASKER

where is this at can u repaste the code with out it?
Avatar of Eyal
Eyal
Flag of Israel image
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

Avatar of Zirwo01
Zirwo01

ASKER

I i tired this an paged loaded funky.

http://theonlinebeatz.com/Test.html
Avatar of Eyal
Eyal
Flag of Israel image
return to the old version I will try other solution
Avatar of Zirwo01
Zirwo01

ASKER

done. is there pehaps another way we can acomplish this?
Avatar of Eyal
Eyal
Flag of Israel image
find z-index: 10;
and replace it with z-index: 0;
Avatar of Zirwo01
Zirwo01

ASKER

on the origianl code or your?
Avatar of Eyal
Eyal
Flag of Israel image
current code

the div doesn't have id so I can't point you directly to it
Avatar of Zirwo01
Zirwo01

ASKER

can u post it for me with the correct code?
SOLUTION
Avatar of Eyal
Eyal
Flag of Israel image
Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
HTML
HTML

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

62K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts

  • "Invaluable tool for our organization"

    Josh Regalski

  • "Your help has saved me hundreds of hours of internet surfing."

    @fblack61

  • "Just a dang good service!"

    @golferski

  • "Worth every penny."

    Steve Hougom

  • "It’s been a life saver."

    Maria Halt

  • "Best support site I’ve seen!"

    Bob Schneider

  • "I would be lost without them."

    @fblack61

  • "Saved my job multiple times."

    Walt Forbes

  • "I love this site."

    Maria Duwe

  • "Friendly respectful help."

    Andrew Kowtalo

  • "Such top-notch experts."

    @magento

  • "The best money I have ever spent."

    @rwheeler23

  • "Beyond any comprehensible value"

    George Morris

  • "Invaluable tool for our organization"

    Josh Regalski

Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo
© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent