|
JavaScript - Pleas Help! Changing Random Pics With Link
Similar TutorialsHi there, I recently used a random link generator found at http://javascriptkit.com in my webpage: http://random-casino.com The code works in both Firefox and Google Chrome, but not in IE. Any ideas? Hi. I have a problem with a random link generator within a DIV. When I try it on my desktop it works fine, but does nothing once I upload it to the website. I'm not sure how to explain what happens, but here is it, more or less: The website is this: http://torcacita.atspace.com Via an Ajax script, http://torcacita.atspace.com/menu.html is loaded into DIV "menu". Here's the script: <script type="text/javascript"> ajaxpage('menu.html', 'menu') //load "menu.html" into "menu" DIV </script> Well, there's another load of stuff inside the <head> tag. You may see it from the main page source code. Anyway, if you go to the menu.html, the link generator will work there as it is intended; however, if you try it from the main page, it won't do anything. But people are not suppossed to go to menu.html. They are suppossed to load it from the index.html (I mean, plain http://torcacita.atspace.com) So, here's the link generator code: --------------------------------- <script type="text/javascript"> function randomlinks(){ var myrandom=Math.round(Math.random()*9) var links=new Array() links[0]="http://www.javascriptkit.com" links[1]="http://www.dynamicdrive.com" links[2]="http://www.cssdrive.com" links[3]="http://www.codingforums.com" links[4]="http://www.news.com" links[5]="http://www.gamespot.com" links[6]="http://www.msnbc.com" links[7]="http://www.cnn.com" links[8]="http://news.bbc.co.uk" links[9]="http://www.news.com.au" window.location=links[myrandom] } </script> <form> <input type="button" value="Lo Que Sea" onClick="randomlinks()"> </form> --------------------------------- I believe this could be solved if I could target the generator to the whole window, 'cause maybe it's trying to open the new page inside the DIV. Well, I don't know... So, what do you think? Could somebody help me? Hi guys, As a relative newcomer to Javascript this is killing me! Maybe someone can help... I am trying to put an image on the front page of my website that changes to one of two random images on mouseover. This part was easy, and has been done (I got the code from http://www.joemaller.com/javascript/randomroll.shtml). But what I am finding difficult is to make each image link to a different page. For example, if the user mouseovers the main image and sees the 'thumbs up' image, then clicks on it, they should be taken to the 'thumbs up' page. And if the user mouseovers the main image and sees the 'thumbs down' image, then clicks on it, they should be taken to the 'thumbs down' page. The site is he www.uninvitedcritic.com I think using 2 arrays is the way to go, but am not sure. Any help would be appreciated! Question about random link generator http://www.javascriptkit.com/script/cut1.shtml I want to use this script to hold a hundred odd links and show 8 random urls at a time in a list separated by a couple of line breaks. (Instead of just one). Could someone pls alter the code to allow me to do this please ... I also hope to keep the js file off the main html page. (naming the file list.js) Could someone also indicate how I do this. Hopefully these questions are easy if you know how etc. So far i havent been able to do it... Would be good if i could add a line to prevent duplicate randomly drawn links appearing in the list of eight.... thanks very much if you able to indicate it..... I go to a page and have this in the URL http://beta.pigskinempire.com/boxscore.asp?w=6&s=5&yr= I want to create a link on that page that when you click it it changes the URL to http://beta.pigskinempire.com/game.asp?gnum=6&gslot=5 as you can see the numbers 6 and 5 are about the only things that are similar in the substring. I will have this on multiple pages so it will be taking different numbers from the same spots of the URL and plugging them into the new URL into the correct location. Thank you very much if you can help me, I am thinking regEx will be needed but I am not very comfortable with it. Thanks again. Hi, I'm currently trying to incorporate several random link generators on one page, each with different links to be directed to. However, at the minute all the links just direct me to the URLs of the most recent random link to be created. If someone could point me in the right direction to fixing this that would be great! The code I am currently using is: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type="text/javascript">
var movie=new Array()
movie[0]="http://bringbacktheoc.weebly.com"
movie[1]="http://allaboutkarl.weebly.com"
movie[2]="http://recipeshareonline.weebly.com"
function randomLinks(elem)
{
var randomLink=Math.floor(Math.random()*2);
elem.href=movie[randomLink];
elem.target = "_blank";
}
</script>
<a href="#" onclick="randomLinks(this)"<p><font size="20" > 1 </font><p> </a>
</body>
</html>
Thanks! First time poster!!! This forum is great. Anyway, I am having issues with a program that I am writing. I basically have to start with a thumbnail image (non-link) and a link that says "click to see larger image". When I click the link, the image changes to a larger version AND the link text must change to "click to see smaller version". I am able to do this with code below, but I need to find a way to then click on the link again (now "click to see smaller version) and see the whole process undo itself (i.e. back to the thumbnail and "click to see larger version" link). I believe that my problem has something to do with the href tag. At first I left it blank, but nothing worked and it would open a file system menu when I click it. I changed it to "#" and everything worked fine, but I can't get anything to happen after the first click changes the image and text. I am only guessing that it might be because it is a new Web page with "#" at the end of it. I tried a bunch of if-else statements with the src file, but nothing worked. Help please... Code: <script type="text/javascript">
<!--Hide from incompatible browsers
/* <![CDATA[ */
function changeText()
{
document.getElementById('link').innerHTML = 'View Smaller Image';
return false;
}
function changeImage()
{
var newImage = new Image();
newImage.src = "images/cottage_large.jpg";
document.getElementById('thumbnail').src = newImage.src;
return false;
}
/**/
/* ]]> */
// Stop hiding from incompatible browsers -->
</script>
</head>
<body>
<h3>Real Estate</h3>
<p><img src="images/cottage_small.jpg" id="thumbnail"></p>
<a href="#" id="link" onclick="changeImage(); changeText();">View Larger Image</a>
</body>
</html>
I'm a member of a forum the for the Winter season has changed it's CSS a:link color attribute to a more winter themed colour. However I want to revert back to original as I don't particularly like the new colour. My theory is to create a small JS file, that I can define Opera (my browser) to load when loading the site, which will change the colour of links back to the original colour. I have the colour code HTML I want to change it to. I've only ever done a small amount of JS coding but from the research I've done it should go something like this, Code: document.style.alinkColor = "COLOR" I got to that via discovering that Code: document.style.backgroundColor = "COLOR" will change the background colour attribute, however it doesn't seem to work. I think my problem lies somewhere in the attribute name, I know the usually with JS CSS Attributes you would make the attribute starting with a lower case letter and the sub-attribute (e.g. the color bit) starting with an upper case. Anyone able to point me in the right direction? Is it possible to give an anchor tag an id and call it with GetElement? this is what I have tried: Code: <a id="link1" href="test.html">Part 1</a></li> Code: document.getElementById("link1").style.color = "blue";
This is my CSS: Code: A:link {
color:#ffffff;
font-size:14pt;
font-weight:bold;}
A:visited {
color:#ffff00;
font-size:14pt;
font-weight:bold;}
A:hover {
color:#6698ff;
font-size:14pt;
font-weight:bold;}
A:active {
color:#c0c0c0;
font-size:14pt;
font-weight:bold;}
Hi, i have a "customer login" link in my header for customers to login(obviously), when they login i want the link to change to "logout", any ideas on how to do this as i don't have a clue. not good at javascript at all. the link to my website is www.nandahosting.co.uk test login info if required: user: test@nandahosting.co.uk password: password thanks Hi there, I have a menu with 4 links and 4 images associated with them. By default, the image from link 1 is displayed on the page. I would like to change the image with its corresponding one, each time i mouseover one of the other three links. I'm trying to make the following code work unsuccesfully, i might be missing something. Any help will be appreciated. In the <head> section i have this: <script type="text/javascript"> img1 = new Image(); img1.src = "images/party/party.jpg"; img2 = new Image(); img2.src = "images/party/icecream.jpg"; img3 = new Image(); img3.src = "images/party/juice.jpg"; img4 = new Image(); img4.src = "images/party/videogames.jpg"; function change(num){ document.images["linkpic"].src = "img" + num } </script> </head> In the <body> i have: That's my default image <table> <tr> <td width="100"> <img src="images/party/balloon1.jpg" name="linkpic"> </td> <td width="260" valign="top" align="left"> <table> <tr><td><a href="Party1.html" onmouseover="change('1')">Party and Fun</a></td></tr> <tr><td><a href="Party2.html" onmouseover="change('2')">Icecream </a></td></tr> <tr><td><a href="Party3.html" onmouseover="change('3')">Juice </a></td></tr> <tr><td><a href="Party4.html" onmouseover="change('4')">Video Games </a></td></tr> </table> </tr> </table> </body> I would like when i point to Icecream, the picture on the left to change to the Icecream picture and so on. Any hints and help are appreciated! Thanks! I've looked for a solution to this issue, but it seems like a little different scenario than other situations. I made a system for generating friend requests on Facebook. I have a grid that is 6 x 3, for a total of 18 cells. Each cell has a picture in it, and the picture is linked to the Facebook friend request page. My problem is that since each cell is populated at random from the array, I'm getting lots of repeats. For example, some picutures are in 5 cells, and some are in none. I'm trying to figure out how to make it so that once a picture is used once in the grid, it does not get used again in the same grid. I still want every cell filled at random on each page load, I just want to prevent the repeating. Here's my current code: Code: <script type="text/javascript">
var vip_list=new Array(
new Array('http://profile.ak.fbcdn.net/v225/1616/88/s1220771654_2158.jpg','http://www.facebook.com/addfriend.php?id=1220771654'),
new Array('http://profile.ak.fbcdn.net/v223/1233/29/s904885342_9055.jpg','http://www.facebook.com/addfriend.php?id=904885342'),
new Array('http://profile.ak.fbcdn.net/v229/1574/66/s1752031238_626.jpg','http://www.facebook.com/addfriend.php?id=1752031238'),
new Array('http://profile.ak.fbcdn.net/v223/768/71/n661155042_7325.jpg','http://www.facebook.com/addfriend.php?id=661155042'),
new Array('http://profile.ak.fbcdn.net/v226/732/26/n1827289885_2478.jpg','http://www.facebook.com/addfriend.php?id=1827289885'),
new Array('http://profile.ak.fbcdn.net/v229/1631/70/s1425313768_1140.jpg','http://www.facebook.com/addfriend.php?id=1425313768'),
new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1667023416'),
new Array('http://profile.ak.fbcdn.net/v225/1146/29/s506485704_9532.jpg','http://www.facebook.com/addfriend.php?id=506485704'),
new Array('http://profile.ak.fbcdn.net/profile6/270/32/s692160490_8745.jpg','http://www.facebook.com/addfriend.php?id=692160490'),
new Array('http://profile.ak.fbcdn.net/v229/114/83/s1218176198_7375.jpg','http://www.facebook.com/addfriend.php?id=1218176198'),
new Array('http://profile.ak.fbcdn.net/v226/946/4/s1470171885_4973.jpg','http://www.facebook.com/addfriend.php?id=1470171885'),
new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1329505888'),
new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1325496968'),
new Array('http://profile.ak.fbcdn.net/v223/1546/92/s1536913202_2017.jpg','http://www.facebook.com/addfriend.php?id=1536913202'),
new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1624715433'),
new Array('http://profile.ak.fbcdn.net/v228/1282/58/s713998257_3682.jpg','http://www.facebook.com/addfriend.php?id=713998257')
);
var chosen_vip=Math.floor(vip_list.length*Math.random());
var chosen_vip1=Math.floor(vip_list.length*Math.random());
var chosen_vip2=Math.floor(vip_list.length*Math.random());
var chosen_vip3=Math.floor(vip_list.length*Math.random());
var chosen_vip4=Math.floor(vip_list.length*Math.random());
var chosen_vip5=Math.floor(vip_list.length*Math.random());
var chosen_vip6=Math.floor(vip_list.length*Math.random());
var chosen_vip7=Math.floor(vip_list.length*Math.random());
var chosen_vip8=Math.floor(vip_list.length*Math.random());
var chosen_vip9=Math.floor(vip_list.length*Math.random());
var chosen_vip10=Math.floor(vip_list.length*Math.random());
var chosen_vip11=Math.floor(vip_list.length*Math.random());
var chosen_vip12=Math.floor(vip_list.length*Math.random());
var chosen_vip13=Math.floor(vip_list.length*Math.random());
var chosen_vip14=Math.floor(vip_list.length*Math.random());
var chosen_vip15=Math.floor(vip_list.length*Math.random());
var chosen_vip16=Math.floor(vip_list.length*Math.random());
var chosen_vip17=Math.floor(vip_list.length*Math.random());
document.write('<center>');
document.write('<a href="',vip_list[chosen_vip][1],'" target="_blank"><img src="',vip_list[chosen_vip][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip1][1],'" target="_blank"><img src="',vip_list[chosen_vip1][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip2][1],'" target="_blank"><img src="',vip_list[chosen_vip2][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip3][1],'" target="_blank"><img src="',vip_list[chosen_vip3][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip4][1],'" target="_blank"><img src="',vip_list[chosen_vip4][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip5][1],'" target="_blank"><img src="',vip_list[chosen_vip5][0],'" height="60" width="60"></a>');
document.write('<br>');
document.write('<a href="',vip_list[chosen_vip6][1],'" target="_blank"><img src="',vip_list[chosen_vip6][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip7][1],'" target="_blank"><img src="',vip_list[chosen_vip7][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip8][1],'" target="_blank"><img src="',vip_list[chosen_vip8][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip9][1],'" target="_blank"><img src="',vip_list[chosen_vip9][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip10][1],'" target="_blank"><img src="',vip_list[chosen_vip10][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip11][1],'" target="_blank"><img src="',vip_list[chosen_vip11][0],'" height="60" width="60"></a>');
document.write('<br>');
document.write('<a href="',vip_list[chosen_vip12][1],'" target="_blank"><img src="',vip_list[chosen_vip12][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip13][1],'" target="_blank"><img src="',vip_list[chosen_vip13][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip14][1],'" target="_blank"><img src="',vip_list[chosen_vip14][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip15][1],'" target="_blank"><img src="',vip_list[chosen_vip15][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip16][1],'" target="_blank"><img src="',vip_list[chosen_vip16][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip17][1],'" target="_blank"><img src="',vip_list[chosen_vip17][0],'" height="60" width="60"></a>');
document.write('<br>');
</script>
Any suggestions? Thank you! Happy Turkey Day!! I am new to JavaScript and I downloaded a code for image mouse over effects. It works exactly how it's supposed to except when you first load the page, the images are not there. They do not appear and function until you actually roll the mouse over them. Here is the script and the link... any help would be greatly appreciated! Thank you Link Code: <script language="javascript">
//script found on www.a1javascripts.com
//all credit to unknown author
<!-- hide script from old browsers
window.onerror = null;
var netscape = 0;
var goodIE = 0;
browserName = navigator.appName.substring(0,8);
browserVer = parseFloat(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3)
{ netscape = 1; }
if (browserName == "Microsof" && browserVer >= 4)
{ goodIE = 1; }
// end error trapping code
if (netscape || goodIE) {
pic1 = new Image(150,100);
pic1.src = "enso.jpg";
pic2 = new Image(150,100);
pic2.src = "shine.jpg";
pic3 = new Image(150,100);
pic3.src = "samsara.jpg";
pic4 = new Image(150,100);
pic4.src = "samsara.jpg";
a1 = new Image(300,200); a1.src = "personal1.jpg"; a2 = new Image(300,200);
a2.src = "personal2.jpg";
b1 = new Image(325,225); b1.src = "spiritual1.jpg";
b2 = new Image(325,225); b2.src = "spiritual2.jpg";
c1 = new Image(325,225); c1.src = "eyeent1.jpg"; c2 = new Image(300,200);
c2.src = "eyeent2.jpg";
}
function hiLite(imgDocID, imgObjName, imgDocID2, imgObjName2, imgDocID3, imgDocID3) {
if (netscape || goodIE) {
document.images[imgDocID].src = eval(imgObjName + ".src");
document.images[imgDocID2].src = eval(imgObjName2 + ".src");
document.images[imgDocID3].src = eval(imgObjName3 + ".src");
}}
//end hiding -->
</script>
<img alt="Default Image" name="pic" src="default.gif"
height="100" width="150" /><br />
<a onclick="window.focus()"
onmouseout="hiLite('pic','pic1','a','a1'); window.status='';return true;"
onmouseover="hiLite('pic','pic2','a','a2'); window.status='Button 1';return true;"
href="your-page.html"><img alt="Button 1" name="a"
src="upbutton1.gif"
style="border: 0px solid ; width: 325px; height: 225px;" /></a><br />
<a onclick="window.focus()"
onmouseout="hiLite('pic','pic1','b','b1'); window.status='';return true;"
onmouseover="hiLite('pic','pic3','b','b2'); window.status='Button 2';return true;"
href="your-page.html"><img alt="Button 2" name="b"
src="upbutton2.gif"
style="border: 0px solid ; width: 325px; height: 225px;" /></a>
<a onclick="window.focus()"
onmouseout="hiLite('pic','pic1','c','c1'); window.status='';return true;"
onmouseover="hiLite('pic','pic4','c','c2'); window.status='Button 3';return true;"
href="your-page.html"><img alt="Button 3" name="c"
src="upbutton3.gif"
style="border: 0px solid ; width: 325px; height: 225px;" /></a>
I want to build functionality like that (see http://www.cymaxstores.com/Common/Pr....aspx?ID=26094) is it possible with only javascript , or ??? I dont have any clue plz help any help would be appreciated Thanks sknaht Hey guys, I have this site http://free-documentaries-online.com . If you go to any documentary page and look under the documentary you will see 'Share this documentary:' like the picture below. I was wondering if you could make all the pictures have a similar size image? facebook.jpg, twitter.jpg, linkedin.jpg, digg.jpg, stumbleupon.jpg, delicious.jpg Here is the code: Code: <a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="freedocosonline">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <script src="http://www.stumbleupon.com/hostedbadge.php?s=4"></script>
<a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;">
<img src="http://free-documentaries-online.com/images/delicious.jpg" width="20" height="20" alt="Delicious" title="Add to Delicious!" /></a> <script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggIcon"></a>
<a rel="nofollow" target="_blank" href='http://www.facebook.com/sharer.php?u=http://free-documentaries-online.com/watch/index?watch=<? echo "$foldername"; ?>'> <img border="0" src="../images/facebook.jpg" width="20" height="20"></a> <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share"></script></center>
Thanks in advance Im currently working on a project for class and have been directed to use Javascript for what im looking to do. Im a beginner when it comes to coding w/ javascript. Over the last couple days I've spent good time reading and practicing tutorials but have yet to do something I imagine is very basic for what I want to do. At the moment, im looking to insert text into a webpage, that links to images. The images, ideally will layer on top of each other (Multiple images can be shown based on the "text" which activates it) Images shown, if done what im looking for, will have a transparent background to view images set behind one another. I've spent a couple hours looking up code through google, found similiar code which i've tried to manipulate to do what I want. I have yet to put something successful together. Was hoping I could look upon experience programmers to help me out by pointing me in the right direction. Im willing to do the work, just looking for that guidance |
|||||||