JavaScript [target=new] equivalent

Heathen · 10-03-2011 6:28pm #1

Hello all.

I know my way around HTML no bother, but am using the following piece of javascript code to run a rotating banner ad with multiple urls included...

http://www.webniche.com/rotate_banners/rotate.html

This script works like a dream, perfect for what i am after.. however, i cannot for the life of me figure out how to get the clicked link to appear in a new window.. in the same way as "target=new" does in HTML..

so far i have found pop-up scripts that have worked, but im not after popups, i just want to to open up in a new tab as is possible with HTML

has anyone got any ideas?

Thanks

KylieWyley · 10-03-2011 6:34pm

<HTML><HEAD>
<TITLE>Rotating banners with links</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -

if (document.images) {
ads = new Array(3);
ads[0] = "slipper_ad.gif";
ads[1] = "webnichebanner.jpg";
ads[2] = "sfcmp_ad.gif";
}

newplace = new Array(3);
newplace[0] = "http://www.silcom.com/~bevjack/"
newplace[1] = "http://www.webniche.com"
newplace[2] = "http://www.sfcmp.org"

var timer = null
var	 counter = 0

function banner() {
	    timer=setTimeout("banner()", 4000);
		counter++;
		if (counter >= 3)
		counter = 0;
		document.bannerad.src = ads[counter];
}

function gothere() {
		counter2 = counter;
		[B]window.open(newplace[counter2],'_blank');[/B]
}

// - End of JavaScript - -->
</SCRIPT>

</HEAD>
<BODY BGCOLOR="#FFFFFF" onload="banner()">

<a href="javascript:gothere()"><IMG SRC="webnichebanner.jpg" WIDTH="468" HEIGHT="60" BORDER="0" NAME="bannerad"></a>

</BODY>
</HTML>

just one little change to the code, in bold there.

mewso · 10-03-2011 7:49pm

So many crimes against good scripting there. Step 1. Create a page that works if script is off:-

<!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>
    <title>My Ad Page</title>
    <style type="text/css">
        ul#AdRotator    {
            list-style-type:none;
            margin:0;
            padding:0;
        }
        
        ul#AdRotator li {
            list-style-type:none;
            float:left;
        }
        
        ul#AdRotator li img {
            border:none;
            width:200px;
            height:298px;
        }
    </style>
</head>
<body>
    <div id="Page">
        <ul id="AdRotator">
            <li>
                <a href="http://en.wikipedia.org/wiki/Homer_Simpson" target="_blank">
                    <img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/02/Homer_Simpson_2006.png/212px-Homer_Simpson_2006.png" alt="Click to buy stuff" />
                </a>
            </li>
            <li>
                <a href="http://en.wikipedia.org/wiki/Marge_Simpson" target="_blank">
                    <img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/0b/Marge_Simpson.png/220px-Marge_Simpson.png" alt="Click to buy stuff" />
                </a>
            </li>
            <li>
                <a href="http://en.wikipedia.org/wiki/Bart_Simpson" target="_blank">
                    <img src="http://upload.wikimedia.org/wikipedia/en/thumb/e/ed/Bart_Simpson.svg/200px-Bart_Simpson.svg.png" alt="Click to buy stuff" />
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

Now add script that makes them rotate:-

<!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>
    <title>My Ad Page</title>
    <style type="text/css">
        ul#AdRotator    {
            list-style-type:none;
            margin:0;
            padding:0;
        }
        
        ul#AdRotator li {
            list-style-type:none;
            float:left;
        }
        
        ul#AdRotator li img {
            border:none;
            width:200px;
            height:298px;
        }
    </style>
    [B]<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("ul#AdRotator").data("currentAd", -1);
            runRotator();
        });

        function runRotator() {
            $("ul#AdRotator li a").hide();
            var currentAd = $("ul#AdRotator").data("currentAd");
            currentAd += 1;
            if (currentAd > 2) {
                currentAd = 0;
            }
            $("ul#AdRotator li a").eq(currentAd).show();
            $("ul#AdRotator").data("currentAd", currentAd);
            setTimeout("runRotator()", 4000);
        }
    </script>[/B]
</head>
<body>
    <div id="Page">
        <ul id="AdRotator">
            <li>
                <a href="http://en.wikipedia.org/wiki/Homer_Simpson" target="_blank">
                    <img  src="http://upload.wikimedia.org/wikipedia/en/thumb/0/02/Homer_Simpson_2006.png/212px-Homer_Simpson_2006.png"  alt="Click to buy stuff" />
                </a>
            </li>
            <li>
                <a href="http://en.wikipedia.org/wiki/Marge_Simpson" target="_blank">
                    <img  src="http://upload.wikimedia.org/wikipedia/en/thumb/0/0b/Marge_Simpson.png/220px-Marge_Simpson.png"  alt="Click to buy stuff" />
                </a>
            </li>
            <li>
                <a href="http://en.wikipedia.org/wiki/Bart_Simpson" target="_blank">
                    <img  src="http://upload.wikimedia.org/wikipedia/en/thumb/e/ed/Bart_Simpson.svg/200px-Bart_Simpson.svg.png"  alt="Click to buy stuff" />
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

JavaScript [target=new] equivalent

Comments