JavaScript - Clickable Background And Header
Hi,
I need to change the background and the header of a website on which i display ads (by an adserver) It works with this code : <script type="text/javascript"> parent.document.getElementsByTagName("body")[0].style.backgroundImage="url(http://example.jpg)"; parent.document.getElementsByTagName("body")[0].style.backgroundPosition="center 0"; parent.document.getElementsByTagName("body")[0].style.backgroundRepeat="no-repeat"; parent.document.getElementsByTagName("body")[0].style.backgroundColor = "#85bc21"; parent.document.getElementById("header").style.backgroundImage="url(http://example.jpg)"; </script> But i need those elements become clickable. Have you any solutions ? Thanks a lot. Sorry for my %"*!?& english Benoo Similar TutorialsI have created this svg color picker : Edit fiddle - JSFiddle I want that each color can be clicked and if each of them clicked, it will rotate the selected image to the top while the rest of the color will be moved accordingly clockwise (like a wheel). I have a "button" that calls formA, which in turns calls formB, all done through javascript. As a button: Code: <input type="button" value="Preview" onClick="popupform();"> works perfectly. Of course the user doesn't want some ugly standard button. They want this beautiful image to show instead (personally, I think the .gif they made looks like barf, but that's besides the point...sorry). When I substitute Code: <input type="image" src="/preview/preview_button.gif" name-"preview" alt="Preview Your Item" border="0" onClick="popupform();"> everything works as it should, except the original form, the one that has the button/image on it, becomes a 404 Object not found. The popupform() sets a bunch of cookies, and calls formB. FormB is a .php which reads the cookies and does some other stuff. Not that it should matter, but I am running everything locally in Vista using the XAMPP Apache Friends Edition and going through localhost (because formB is a .php) Thanks in advance. I have a situation in which I have to track clicks (links etc..). The problem is, I have a larger div ie - parentDiv - like 300px height, 400px width - approximate. This div has a background image. Now, the issue arises because over this div (parentDiv), I have another div "announceDiv" on top of it showing information. I ONLY want the parts of parentDiv that is NOT covered by announceDiv to be clickable. Just to reiterate, I have a big div that I want clickable (so I can add a link to the click), but over this big div I have a smaller div showing content ie, information, that links to its own stuff. BUT I want to be able to link from this background image that is in the parentDi without affecting when I click in the smaller div that is superimposed over it. any ideas? has to work in ie6+ and ff 3+ Hello all, I am using an editable iframe to change the style of the text as a person enters text depending on what they type in. Sometimes the text needs to be a link, and while inserting a link works, I can't click on it. I was wondering if anyone knows how to get links in an editable iframe to click through. I've researched this for a while now without getting anywhere. Right now I'm guessing that I need to somehow find out if the user is hovering over a link and turn "designMode" off for that section of text, or the whole iframe, I'm not completely sure. Anyway, any help would be greatly appreciated! Hello.. I have seen this somewhere, but I don't know how to make it - possibly with a JavaScript integrated with the HTML code to create a submit button. What I want is once the page is loaded, I want the submit button to count down from 5 to 0, and when it's reached 0, the button is clickable - but before that, nothing happens when you click it obviously. How can I obtain this? Whether if it's created in JavaScript or jQuery doesn't matter, I use both... Thanks Hi! Not sure if this is the right forum for this, but I'm using Javascript so it kinda made sense I have some Javascript that is selecting text from a form textarea and copying it to the clipboard: Code: document.myForm.myTextarea.focus(); document.myForm.myTextarea.select(); document.execCommand( 'Copy' ); This works great. However there is a problem when I try to paste the text somewhere else. Assuming that the text that is being copied is a URL ( ie. http://www.google.com ), I would like it to be pasted as a link. When I grab a URL from the address bar inside a web browser and paste it somewhere ( such as an e-mail ), it automatically shows up as a clickable link. When I put a URL into my form textarea and run the javascript, it gets pasted as a plain text ( ie. not underlined and not clickable ). Why are these two different? I've tried running a program to see what is actually copied into the clipboard and I don't see any differences. There must be something that denotes the URL copied from the address bar as a link and therefore makes it clickable when pasted. Is there a way to force this in order to make what is copied to the clipboard from my form textarea a clickable link? Thanks! My slideshow links will only open inside my inline frame. I'm sure there's something simple I need to change in the code to make it open full screen. Here is my code. Any help would be so much appreciated! Thank you. Shawnel <head> <style type="text/css"> .style1 { vertical-align: top; } </style> </head> <script type="text/javascript"> <!-- //preload images var image1=new Image() image1.src="Images/Picture Box/PictureBox1.jpg" var image2=new Image() image2.src="Images/Picture Box/PictureBox2.jpg" var image3=new Image() image3.src="Images/Picture Box/PictureBox3.jpg" var image4=new Image() image4.src="Images/Picture Box/PictureBox4.jpg" var image5=new Image() image5.src="Images/Picture Box/PictureBox5.jpg" //--> </script> <body style="margin-top: 0"> <a href="javascript:slidelink()"><img src="Images/Picture Box/PictureBox1.jpg" name="slide" border="0" width="539" height="314" class="style1" /></a> <script type="text/javascript"> <!-- var step=1 var whichimage=1 function slideit(){ if (!document.images) return document.images.slide.src=eval("image"+step+".src") whichimage=step if (step<5) step++ else step=1 setTimeout("slideit()",3000) } slideit() function slidelink(){ if (whichimage==1) window.location="learnmore.htm" else if (whichimage==2) window.location="contactus.htm" else if (whichimage==3) window.location="hungerheroes.htm" else if (whichimage==4) window.location="donate.htm" else if (whichimage==5) window.location="volunteer.htm" } //--> </script> I have created a slideshow before but I want to create a slideshow where a person clicks on a link and it goes to a certain picture which might have one or more links embedded into the picture something like this: http://www.myeloma.org.uk/ any guides on how to do this? help much appreciated hi everyone! i downloaded a Facebook Page template recently. the template works great, but i wanted to add one thing. here is the demo of the code: http://www.facebooktemplates2u.com/d...best_business/ here is where you can download the template: http://www.schoolofrok.com/facebook/html.zip/ anyhow, the part i want to change is the link that directs it to the content. for example, when you scroll over About Us, the little pop up from the bottom comes out. when you click it, it takes you to the About Us content. what i wanted to do, is make it so that when you click the whole jpg, it can take you to the content also. i noticed that the small link that pops up is too tiny and people get confused on where to click. any suggestions? TIA! Hiya, I created this thread on the html forum but I'm not sure if it can be done with javascript, so I'll post here as well. I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs. This is example of what I mean: Thanks Hi, Im having a weird issue... I am using position absolute to stick a table header to the top of a div. In the screenshot, under the menu is a div, the buttons and drop downs are at the "top" and grid starts from half way down, now when user scrolls till header is out of view i show the header at the "top" with position absolute. then when user scrolls back down and onto original position the buttons and drop downs are now again at the top exactly at the position where the header was shown, once the header has been shown all the buttons and the drop down are no longer clickable, i.e. there is no reaction, no dropdown shown and no click... whats happening is that IE is thinking that that area at the top where the header was is now invalid, or still occupied by the header or something like that? Its like the buttons and drop downs are kind of "behind" the area where the header was therefore nothing is clickable... And proof of this is that i gave some <BR> spacing to the buttons and drop downs so that they are not at the up most, but halfway down... and things work fine... whats IE up to? or is there some coding i need to do... below is the code for the header to float [it may be coz when the header is not to be shown i set the position to ' ', but i have tried with relative, fixed and static as well to no avail...] Code: <script language="javascript" type="text/javascript"> var floating_header = function() { this.header = document.getElementsByTagName('THEAD')[0].getElementsByTagName('TR')[0]; this.getXY = function(o) { var y = 0; var x = 0; while (o != null) { y += o.offsetTop; x += o.offsetLeft; o = o.offsetParent; } return { "x": x, "y": y }; } this.setheader = function() { if (window.header == undefined) { floating_header(); } var screenpos = this.scrollTop; var theady_max = window.getXY(window.table_obj.getElementsByTagName('THEAD')[0]).y + window.table_obj.offsetHeight; if (screenpos > window.theady - 100 && screenpos < theady_max) { window.header.style.position = 'absolute'; window.header.style.top = this.offsetTop; window.header.style.display = 'block'; window.headerOffsetTop = this.offsetTop; } else { if (screenpos != undefined && window.header != undefined) { window.header.style.position = ''; window.header.style.top = ''; window.headerOffsetTop = undefined; window.header = undefined; } else { if (window.headerOffsetTop) { window.header.style.position = 'absolute'; window.header.style.top = window.headerOffsetTop; window.header.style.display = 'block'; } } } } document.getElementById("divcn").onscroll = this.setheader; this.table_obj = document.getElementsByTagName('THEAD')[0].parentNode; this.theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y; }; floating_header(); </script> I have called a table through XML with four fields. One of them is Excel file name. I like to make a clickable link with Excel file name to open it. XML code: Code: <?xml version="1.0" encoding="ISO-8859-1" ?> <searchable_index> <item name="Ana" title="Data" link="doc\ana.xls">Member</item> <item name="Ana" title="Data" link="doc\ana.xls">Member</item> <item name="Ana" title="Data" link="doc\ana.xls">Member</item> <item name="Ana" title="Data" link="doc\ana.xls">Member</item> </searchable_index> Javascript code document.write('<table border="1" style="width: 100%;">'); document.write('<tr><th>name</th><th>title</th><th>link</th></tr>'); for(var i=0; i<results.length; i++) { document.write('<tr>'); document.write('<td>' + results[i].getAttribute("name") + '</td>'); document.write('<td>' + results[i].getAttribute("title") + '</td>'); document.write('<td>' + results[i].getAttribute("link")" > + '</td>'); //<a href="url">Link text</a> document.write('</tr>'); } document.write('<table>'); document.close(); Hi im using this php code right here for a search function that opens url's in an iframe
PHP Code: $text = $_POST['text']; switch($_POST['engine']) { case 1: for($i=0;$i<strlen($text);$i++) { if($text[$i]==" ") { $text[$i]="+"; } } $data = "http://www.yahoo.com".$text; break; case 2: $data = "http://www.google.com".$text; break; Code: <FORM name="search" ACTION='search.php' METHOD='POST' target="frame"> <input TYPE='text' NAME="text" id="text" class="search" /> <font face="verdana"> <input type='submit' name="submit" value="Go" class="button" /><br /> Select Engine: </font><br /> <select name="engine" size="26"> <option value="1">yahoo</option> <option value="2">google</option> </select> </form> what i want to do is instead of using the option form i want to make clickable tables or divs, that when clicked opens the url in the iframe. can anybody help me with this? I'm very new at this and have very limited HTML/Java Script knowledge, but since my designer is very busy, I thought I'd take a look at some of this coding and see if I can learn how to do certain things myself. I'm trying to create a clickable slide show. I read all the instructions given on www.javascriptkit.com and created the following: Code: Slide Show Code <script type="text/javascript">// <![CDATA[ //preload images var image1=new Image() image1.src="http://www.moxiecouture.com/images/princesspettiset2.jpg" var image2=new Image() image2.src="http://www.moxiecouture.com/images/princesspettiset2.jpg" var image3=new Image() image3.src="http://www.moxiecouture.com/images/daddysprincesstutuonesielarge.jpg" // ]]></script> <p><a href="javascript:slidelink()"><img src="../images/princesspettiset2.jpg" border="0" alt="" width="50" height="75" /></a></p> <script type="text/javascript">// <![CDATA[ var step=1 var whichimage=1 function slideit(){ if (!document.images) return document.images.slide.src=eval("image"+step+".src") whichimage=step if (step<3) step++ else step=1 setTimeout("slideit()",1800) } slideit() function slidelink(){ if (whichimage==1) window.location="http://moxiecouture.com/category_3/Petti-Sets.htm" else if (whichimage==2) window.location="http://moxiecouture.com/category_3/Petti-Sets.htm" else if (whichimage==3) window.location="http://moxiecouture.com/category_2/TuTu-One-Pieces.htm" } // ]]></script> My issue with this is that it's not rotating the images. Of course, there is something I'm missing even though I tried to read the instructions carefully. Can anyone help me understand what I'm doing wrong? Thanks! Hey all.. I just finished a semester at the local junior college in javascript programming. Didnt teach us very well, but I learned several basics. I have skills in several different aspects of programming now, but none as an expert by any means. Now, I am working on a project for my wife's non-profit that she is involved in, and an wanting to create a thumbnail sized picture 'band' at the top of my website, with images of things that she wants the user to be able to click on to pop up a bigger picture into a new window, a popup window, mind you. This 'image gallery', needs to be able to be clicked on to move the images to the left or to the right, and display, maybe 5 to seven images at a time in about a 100px height band. I have seen this on other websites before, and I have the software to do my own programming, and I 'should have' developed the skills by now, lol, but, I just need some help getting started in the right direction in knowing how to start out. Like, what do I need to accomplish to do this? I already have a div set up for the container for it. The website is using a combination of html, css, php, mysql and javascript. Thank you; Ice Hello all, I've been attempting to have a popup window open upon clicking a specific table cell. So far I've not been able to make any headway except that I'd like for the popup to be a Modal window. Here's the code I have for the page so far: Code: <? include('include/queries/getCustomerOrderInfo.php'); // now run the queries... if($_SESSION['issuperuser']){ //var_dump($sqlGetOrderInfo); } $qryGetOrderInfo = mysql_query($sqlGetOrderInfo, $connection_id); ?> <link href="css/dropshipetc.css" rel="stylesheet" type="text/css"> <span class="smokeytext bold letterspacing_1px">ORDER INFO</span> <hr> <div id="OrderInfoTableHeader" style="margin-top:10px; width:550px;"> <table style="border-collapse:collapse; width:528px;" border=0> <tr> <!---<td style="width: 114px; border-bottom: 1px solid; border-right: 1px solid;" class="oi_tableheader">PO No.</td>---> <td style="width: 75px; border-bottom: 1px solid; border-right: 1px solid;" class="oi_tableheader">Status</td> <td style="width: 77px; border-bottom: 1px solid; border-right: 1px solid;" class="oi_tableheader">Item No.</td> <td style="width: 151px; border-bottom: 1px solid; border-right: 1px solid;" class="oi_tableheader">Tracking No.</td> <td style="width: 222px; border-bottom: 1px solid;" class="oi_tableheader">Shipped To</td> <!---<td class="oi_tableheader"></td>---> </tr> </table> </div> <div id="OrderInfoWrapper" style="overflow:auto; width:550px; height:575px;"> <!---<table style="border-collapse:collapse; width:533px;" border=1>---> <table style="border-collapse:collapse; width:528px;" border=0> <? $lastPurchaseNumber = ''; while ($thisRow = mysql_fetch_assoc($qryGetOrderInfo)){ $thisShippedToName = $thisRow['soshpname']; $thisPurchaseNumber = $thisRow['sopurchno']; $thisItemNumber = $thisRow['solnsvptno']; if(strlen($thisRow['solnkitno']) > 0){ $thisItemNumber = $thisRow['solnkitno']; } if(strlen($thisItemNumber) == 10){ $thisItemNumber = substr($thisItemNumber, 0, 6); } switch(strtolower($thisRow['orderstatus'])){ case 'returned' : $thisStatus = 'Returned'; $cellClass = 'redbackground'; break; case 'pending' : $thisStatus = 'Pending'; $cellClass = 'yellowbackground'; break; case 'processing' : $thisStatus = 'Processing'; $cellClass = 'orangebackground'; break; case 'shipped' : $thisStatus = 'Shipped'; $cellClass = 'greenbackground'; break; default: $thisStatus = 'PENDING'; $cellClass = 'yellowbackground'; break; } $thisTrackingNumber = $thisRow['upstrackno']; if($thisPurchaseNumber != $lastPurchaseNumber){ $lastPurchaseNumber = $thisPurchaseNumber; ?> <tr> <td colspan=4 style="border-bottom: 1px solid;" class="smokeytext bold">PO#<? echo $thisPurchaseNumber; ?> </td> </tr> <?}?> <tr> <!---<td style="width: 114px; border-bottom: 1px solid; border-right: 1px solid;"></td>---> <td style="width: 76px; border-bottom: 1px solid; border-right: 1px solid; text-align:center;" class="<?echo $cellClass; ?>"><? echo $thisStatus; ?></td> <td style="width: 77px; border-bottom: 1px solid; border-right: 1px solid; text-align:center;"><? echo $thisItemNumber; ?></td> <td style="width: 150px; border-bottom: 1px solid; border-right: 1px solid; text-align:center;"><? echo $thisTrackingNumber; ?></td> <td style="width: 226px; border-bottom: 1px solid;"><? echo $thisShippedToName; ?></td> </tr> <?} ?> </table> </div> This is the table cell I need clickable: Code: <td colspan=4 style="border-bottom: 1px solid;" class="smokeytext bold">PO#<? echo $thisPurchaseNumber; ?></td> ANY help would be greatly appreciated! So i purchased a template from template monster for wordpress. http://www.templatemonster.com/demo/28861.html On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link. My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain. --------------------------------------------------------------------- <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> ------------------------------------------------------------------------ Full code below <div id="thumbs" class="navigation"> <ul class="thumbs noscript"> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" /> </a> <div class="caption"> <div class="indent1">in grey</div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" /> </a> <div class="caption"> <div class="indent1">in grey </div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li class="last"> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> </ul> </div> </div> </div> I HAVE CHANGED THE LOCATION
Hello all ~ It's been a long time since I've been on here, but I am trying to insert a header into my pages at http://www.dreamsonthefly.com the header being "Guided Fly Fishing on the Owyhee & Grande Ronde Rivers". I am not finding any .css on the page so I am hoping I can place in where it sits now but using the JS below and getting more space so the drop down menus don't interfere with the h1. I use Homestead and found when I was working with the JS Homestead put's their own code in as needed for their site. I am not well versed in all of this but I do understand what I need just not certain how to do it. I sure hope this all makes sense and appreciate the help. Code: <div align="center"> <img src="headerforflybooklarger.jpg" alt="Fly fishing for Steelhead, Brown Trout & Smallmouth Bass" width="1020" height="126" hspace="0"/> </div> <div align="center"> <script type="text/javascript" language="JavaScript1.2"> <!-- stm_bm(["menu3374",430,"","blank.gif",0,"","",1,2,2,2,1000,1,1,1,"","100%",83886335],this); stm_bp("p0",[0,4,0,0,15,3,0,7,100,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.10)",-2,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.10)",-2,100,0,0,"#000000","transparent","",0,0,0,"#000000"]); stm_ai("p0i0",[0,"Home","","",-1,-1,0,"http://www.dreamsonthefly.com/index.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000"," bold 12pt Garamond"," bold 12pt Garamond",0,0],10,0); stm_aix("p0i1","p0i0",[0,"The Fish","","",-1,-1,0,"http://www.dreamsonthefly.com/thefish.html"],10,0); stm_aix("p0i2","p0i0",[0,"Destinations","","",-1,-1,0,"http://www.dreamsonthefly.com/destinations.html","_self","","","","",0,0,0,"arrow_r.gif","arrow_r.gif",7,7],10,0); stm_bp("p1",[1,4,0,-1,4,3,0,0,100,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.41)",-2,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.41)",-2,69,2,8,"#A87F09","",0,1,1,"#000000"]); stm_aix("p1i0","p0i0",[0,"Owyhee Trout","","",-1,-1,0,"http://www.dreamsonthefly.com/owyhee.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,1,1],10,0); stm_aix("p1i0","p0i0",[0,"Grande Ronde","","",-1,-1,0,"http://www.dreamsonthefly.com/granderonde.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,1,1],10,0); stm_aix("p1i1","p1i0",[0,"Owyhee Bass","","",-1,-1,0,"http://www.dreamsonthefly.com/ofloat.html"],10,0); stm_ep(); stm_aix("p0i3","p0i2",[0,"Guides","","",-1,-1,0,"http://www.dreamsonthefly.com/Newguides.html"],10,0); stm_bpx("p2","p1",[]); stm_aix("p2i0","p1i0",[0,"Dave Tucker","","",-1,-1,0,"http://www.dreamsonthefly.com/dtguide.html"],10,0); stm_aix("p2i1","p1i0",[0,"Rhonda Price","","",-1,-1,0,"http://www.dreamsonthefly.com/rkpguide.html"],10,0); stm_aix("p2i2","p1i0",[0,"Our Guides","","",-1,-1,0,"http://www.dreamsonthefly.com/guidesbios.html"],10,0); stm_ep(); stm_aix("p0i4","p0i0",[0,"Rates","","",-1,-1,0,"http://www.dreamsonthefly.com/newlodging.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000","bold 12pt Garamond","bold 12pt Garamond",0,0],10,0); stm_aix("p0i5","p0i2",[0,"Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/allflyinfo.html"],10,0); stm_bpx("p3","p1",[]); stm_aix("p3i0","p1i0",[0,"Steelhead Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/steelheadflies.html"],10,0); stm_aix("p3i1","p1i0",[0,"Trout Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/troutflies.html"],10,0); stm_aix("p3i2","p1i0",[0,"Atlantic Salmon Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/atlanticsalmonflies.html"],10,0); stm_ep(); stm_aix("p0i6","p0i4",[0,"Photos","","",-1,-1,0,"http://www.dreamsonthefly.com/photogallery.html"],10,0); stm_aix("p0i7","p0i2",[0,"Contact Us","","",-1,-1,0,"http://www.dreamsonthefly.com/Contact.html"],10,0); stm_bpx("p4","p1",[]); stm_aix("p4i0","p1i0",[0,"Airline Reservations","","",-1,-1,0,"http://www.travelstoremaker.com/cgit/porch?agentid=dreamsonthefly"],10,0); stm_ep(); stm_aix("p0i8","p0i2",[0,"Links","","",-1,-1,0,"http://www.dreamsonthefly.com/links.html"],10,0); stm_bpx("p5","p1",[]); stm_aix("p5i0","p1i0",[0,"Education","","",-1,-1,0,"http://www.dreamsonthefly.com/education.html"],10,0); stm_aix("p5i1","p1i0",[0,"Resources","","",-1,-1,0,"http://www.dreamsonthefly.com/resources.html"],10,0); stm_ep(); stm_aix("p0i9","p0i0",[0,"Blog","","",-1,-1,0,"http://www.dreamsonthefly.com/blog.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000","bold 12pt Garamond","bold 12pt Garamond",0,0],10,0); stm_ep(); stm_aix("p0i9","p0i0",[0,"Book Trip ","","",-1,-1,0,"http://www.theflybook.com/Default.aspx?shop=108e506d-f6f6-4356-8e19-1e682ece3bf1","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000","bold 12pt Garamond","bold 12pt Garamond",0,0],10,0); ; ; stm_ep(); stm_ep(); stm_em(); //--> </script> </div> Hi, I wonder if anyone can help me. I have a header I use on my site which has a Javascript code for rotating banner ads. I'd like to try to track the clickthroughs on these ads and have been looking at the methods of doing this in google analytics, but they all seem to be for single links, such as the method he http://support.google.com/googleanal...n&answer=55527 which then don't work with the links as they are in the banner. I was wondering if anyone knew how I would be able to integrate the analytics code in that link into the banner I have, or of another method I can use to track clicks on the ads. Thanks! This is the banner I'm using: Code: <script type="text/javascript">function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++) { this[i] = initArray.arguments[i]; } } link = new initArray( "http://www.jojingles.com", "http://www.goals-solutions.com/", "http://www.barleylands.co.uk/", "http://www.blukangaroo.co.uk/onlineshop", "http://www.explorelearning.co.uk/vebo", "http://www.explorelearning.co.uk/vebo", "http://www.allmumkind.com/", "http://quintessencemassage.weebly.com", "http://www.dw-beauty.co.uk", "http://www.theclothestree.co.uk" ); image = new initArray( "http://www.essexmums.org/images/jojingleslong.gif", "http://www.essexmums.org/images/goalssolutionbanner.jpg", "http://www.essexmums.org/images/barleylandsbanner.jpg", "http://www.essexmums.org/images/blukangaroo.jpg", "http://www.essexmums.org/images/explorelakeside.jpg", "http://www.essexmums.org/images/explorelakeside.jpg", "http://www.essexmums.org/images/allmumkind3.jpg", "http://www.essexmums.org/images/quintessence.jpg", "http://www.essexmums.org/images/dwbannerad.jpg", "http://www.essexmums.org/images/clothestree.jpg" ); text = new initArray( "Jo Jingles", "Goals Solution", "Barleylands", "Blu Kangaroo", "Explore Lakeside", "Explore Lakeside", "Allmumkind", "Quintessence", "DK Beauty", "The Clothes Tree" ); function getrandom(){ var core2 = Math.floor(Math.random()*10); // amount of items in array displaybanner(core2) displaybanner(core2) } function displaybanner(theNum2){ var ranlink2 = link[theNum2]; var ranimage2 = image[theNum2]; var rantext2 = text[theNum2]; document.getElementById('theImg2').alt=rantext2; document.getElementById('theImg2').src=ranimage2; document.getElementById('theLink2').href=ranlink2; } </script><a href="#" target="_blank" id="theLink2"><img src="" alt="" id="theImg2" border="0"></a> <script type="text/javascript"> getrandom(); setInterval("getrandom()", 22000); </script> |