|
JavaScript - Problem With Roll-over Image Code
Hi, I'm having a problem getting one of my image rollovers to work, what confuses me is that the other image works fine, I'm trying to get this to
work for an assignment here's the javascript: Code:
rollImage = new Array()
for(i = 0; i < 12; i++){
rollImage[i] = new Image(85,85);
}
rollImage[0].src = "images/narav2.jpg";
rollImage[1].src = "images/narav3.jpg";
rollImage[2].src = "images/sasuke-avatar-118.jpg";
rollImage[3].src = "images/sasuke.jpg";
function swapNar(img){ //this works fine
document.nar11.src = rollImage[img].src;
return true;
}
function returnNar(img){ //this function works fine as well
document.nar11.src = rollImage[img].src;
return true;
}
function swapSas(img){ //this function not working
document.sasim.src = rollImage(img).src;
return true;
}
function returnSas(img){ //this function also not working
document.sasim.src = rollImage(img).src;
return true;
}
Here's the HTML: Code:
<tr>
<td height="60">
<img src="images/narav2.jpg" name="nar11" width="85" height="85" border="0" id="nar11"/>
</td>
<td>
<a href="naruto.html" onMouseover = "swapNar(1)" onMouseout = "returnNar(0)"> Naruto </a>
</td>
</tr>
<!-- When I mouse over the above link the image rolls over as expected,
the bottom link doesn't work as expected and I can't see what I'm
doing wrong -->
<tr>
<td height="60">
<img src="images/sasuke-avatar-118.jpg" name="sasim" width="85" height="85" border="0" id="sasim"/>
</td>
<td>
<a href="sasuke.html" onMouseout= "swapSas(3)" onMouseover= "returnSas(2)"> Sasuke </a>
</td>
</tr>
I can't see what the problem is with the returnSas and swapSas functions, I'm still a noob at this and would really appreciate some assistance, thanks in advance Similar TutorialsI am trying to create a multiple image rollover and when you click on an image, the page will direct to a relevant external website. However only the first image changes when you rollover it, the other four images will not change. Any suggestions?? Code: <HTML><HEAD><TITLE>Monsters Inc Rollover Images</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<SCRIPT language=Javascript type=text/javascript>
<!--
var monstersincON = new Image;
var sulley = new Image;
var mike = new Image;
var booON = new Image;
var randallON = new Image;
var monstersincOFF = new Image;
var sulleyOFF = new Image;
var mikeOFF = new Image;
var booOFF = new Image;
var randallOFF = new Image;
monstersincON.src = "../images/monstersinc.jpg";
sulleyON.src = "../images/scully.jpg";
mikeON.src = "../images/mike.jpg";
booON.src = "../images/boo.jpg";
randallON.src = "../images/randall.jpg";
monstersincOFF.src = "../images/monstersincoff.jpg";
sulleyOFF.src = "../images/scullyoff.jpg";
mikeOFF.src = "../images/mikeoff.jpg";
booOFF.src = "../images/boooff.jpg";
randallOFF.src = "../images/randalloff.jpg";
/* Callout: This function takes two parameters, the version name (ON or OFF) and the image name. This makes it possible to handle all image swapping with only this one function. */
function swapImage(version, imagename){
if (document.images){
document[imagename].src = eval(imagename + version + ".src");
}
}
/* Callout: This function turns all images back to their 'off' versions. */
function rollOffAll(){
swapImage('OFF','monstersinc');
swapImage('OFF','sulley');
swapImage('OFF','mike');
swapImage('OFF','boo');
swapImage('OFF','randall');
}
//-->
</SCRIPT>
</HEAD>
<BODY bgColor=white>
<DIV align=center><A onmouseover="swapImage('ON','monstersinc');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://.html"><IMG
border=0 name=monstersinc alt="Monsters Inc"
src="../images/monstersincoff.jpg" width=250 height=250></A>
<HR>
<BR><A onmouseover="swapImage('ON','sulley');" onmouseout=rollOffAll();
onclick="rollOffAll();return true;"
href="http://www..html"><IMG border=0
name=sulley alt=Sulley src="../images/sulleyoff.jpg" width=175
height=225></A>
<BR><A onmouseover="swapImage('ON','mike');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://www..html"><IMG
border=0 name=mike alt=Mike src="../images/mikeoff.jpg" width=175
height=225></A>
<BR><A onmouseover="swapImage('ON','boo');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://www..html"><IMG
border=0 name=boo alt=Boo src="../images/boooff.jpg"
width=175 height=225></A><BR>
<BR><A onmouseover="swapImage('ON','randall');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://www..html"><IMG
border=0 name=randall alt=Randall src="../images/randalloff.jpg"
width=175 height=225></A><BR>
</DIV>
</BODY>
</HTML>
Hi, I've investigated contacting the author, but it doesn't look like I'll get a swift response. The script I'm using is hosted here The script is designed to create a fullscreen, scaling background that can be used as a carousel gallery for images, with a caption that floats next to the mouse pointer that either reads 'next' or 'previous'. It works fine but I am attempting to alter the script to do a few things: 1.Make the image take up a proportionate amount of window space - 85% (done) 2.Get rid of the text which appears on rollover(done) 3.Assign an image flip for the proportionally scaled image (this is the one I'm having problems with) I'm trying not to include too much information but it's hard to know where the problem is. I'm fairly sure this is used to set the scaler up on the page: Code: (function(){
var bg=document.getElementById('bg'),float=document.createElement('span'),scale=Scaler(bg); //Create and bind scaler-function
addEvent=function(el,on,fn){el.attachEvent?el.attachEvent('on'+on,fn):el.addEventListener(on,fn,false)}, //Function for cross-borwser addEvent
move=function(e){
float.style.left=(e=e||window.event).clientX+20+'px';
float.style.top=e.clientY+20+'px';
if(float.nxt!=(e.clientX>(document.body.offsetWidth/2)))float.innerHTML=(float.nxt=!float.nxt)?'':''; //Change html only if needed
},
swap=function(e){
var key=(e=e||window.event).type=='MouseOver'?(e.clientX>(document.body.clientWidth/2)?40:37):e.keyCode;
if(key>36&&key<41){
var data=scale(key>38?'+1':'-1'),l=data.els.length;
for(var i=0;i<l;i++)data.els[i].style.height=i==data.to?'85%':'0px';
}
}
I've then used a simple imageflip function and implemented it here Code: addEvent(bg,'mouseout',function('BNB_mouseon()'){float.style.display='none'}); //Hide floater when not over image
addEvent(bg,'mouseover',function('BNB_mouseon()'){float.style.display='block'});
Where 'bg' stands for the background image div. I've been scratching my head about this for quite a while now, so any advice is appreciated! I'm attempting to impliment it on the website http://www.freddydewemathews.com/, for a little context How can I make a image where the first image "rolls" up and another (different) image "rolls" up from the bottom? I know how to code it except for the animation sequence. All images are 200 width and 50 height.\ Thanks in advance! (Would like to use jQuery if possible) Hi I use dreamweaver to build sites, and so don't really have to do much with the code, however adobe cs5 has removed the navigation bar tool and I am totally lost without it. I know Java script is needed... Could anyone help? If someone has some code ,for a vertical navigation bar with 8 buttons, 3 images for each button, buttonup mouse over and button down (which is of course a link to another page), that I could copy and edit, it would help alot! Hi Guys, I'm wondering if anyone knows of some simple javascript that allows me to create a floating image rollover enlargement, similar to the ones on the homepage of ThemeForest. I've been Googling for hours, so, if anyone knows of a script, i'd be much appreciative. Thanks, Christian ok I have this image and i want the image to change upon the mouse hovering over it. Which in it self is simple to do and I Google numerous different ways on how to do it. But each one i would be forced to use a <a href... in it. The thing is I don't want to use it cause i am already using HTML image map. I really need help on finding the code that would work... This is what I have Code: <html> <head> </head> <body> <p align="center"><img src="room.bmp" border="1" usemap="#maps" alt="Green room" /></p> <map name="maps"> <area shape="rect" coords="25,210,100,300" href="greenroom.html#energy" > <area shape="rect" coords="130,215,185,277" href="greenroom.html#water"> <area shape="rect" coords="80,11,263,149" href="greenroom.html#tv"> </map> ............. Hello, First of all, I am not a coder. I can put together some fairly simple HTML, and can borrow chunks of JS code to suit certain basic purposes. Also, I am terribly sorry if my technical lingo is way off target. I have managed to accomplish two separate goals using javascript, but am having trouble combining their results. I have created an image link that randomly calls a URL from an array. I also have a separate roll-over image. What I am trying to do is have the link that accesses the array also be a roll-over image. I can't seem to accomplish this. http://matrix.senecac.on.ca/~mlinhar...low/page7.html This URL is what I am working on. The "b" symbol is the roll-over. The "right" arrow accesses an array at: http://matrix.senecac.on.ca/~mlinhar...w/randomize.js I have tried simply adding my roll-over code to randomize.js and adjusting the array accordingly, but that doesn't seem to work. I would like the "right" arrow to be a roll-over image as the "b" symbol is, but also access the "randomize" array as it currently does. My problem is that my understanding of JS isn't great enough to determine how separate pieces of code might be combined or function together. Anyways, I'm sorry if my technical knowledge and abilities are too underdeveloped for this forum. I would appreciate any and all advice anyone might have. Hi there, If anyone can help me it would be incredibly appreciated. I have this JavaScript file below. Currently it roll's over the image fine but the image stays as the hover after the mouse rolls over. Is there a really quick way to add a roll off/ mouse off function so the image rolls back to the underlying image? Again thank you in advance for any help you can provide for this problem as I'm very new to JavaScript! Chris *********** "// JavaScript Document $(function() { $('img[data-hover]').hover(function() { $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp'); }).each(function() { $('<img />').attr('src', $(this).attr('data-hover')); });; }); *********** Code: var rollnav = [];
rollnav[0] = new Image ;
rollnav[0].src ="buttons/button 1 suits.png";
rollnav[1] = new Image;
rollnav[1].src = "buttons/button 2 suits.png";
rollnav[2] = new Image;
rollnav[2].src ="buttons/button 1 dresses.png";
rollnav[3] = new Image;
rollnav[3].src ="buttons/button 2 dresses.png";
rollnav[4] = new Image;
rollnav[4].src ="buttons/button 1 christening.png";
rollnav[5] = new Image;
rollnav[5].src ="buttons/button 2 christening";
rollnav[6] = new Image;
rollnav[6].src ="buttons/button 1 Acessories.png";
rollnav[7] = new Image;
rollnav[7].src ="buttons/button 2 Acessories.png";
rollnav[8] = new Image;
rollnav[8].src ="buttons/button 1 home.png";
rollnav[9] = new Image;
rollnav[9].src ="buttons/button 2 home.png";
rollnav[10] = new Image;
rollnav[10].src ="buttons/button 1 contact us.png";
rollnav[11] = new Image;
rollnav[11].src ="buttons/button 2 contact us.png";
rollnav[12] = new Image;
rollnav[12].src ="buttons/button 1 links.png";
rollnav[13] = new Image;
rollnav[13].src ="buttons/button 2 links.png";
function SwapOutsuit(){
document.suitnav.src = rollnav[1].src;
return true;
}
function SwapBacksuit(){
document.suitnav.src = rollnav[0].src;
return true;
}
function SwapOutdress(){
document.dressnav.src = rollnav[3].src;
return true;
}
function SwapBackdress(){
document.dressnav.src = rollnav[2].src;
return true;
}
function SwapOutchris(){
document.chrisnav.src = rollnav[5].src;
return true;
}
function SwapBackchris(){
document.chrisnav.src = rollnav[4].src;
return true;
}
function SwapOutaccess(){
document.accessnav.src = rollnav[7].src;
return true;
}
function SwapBackaccess(){
document.accessnav.src = rollnav[6].src;
return true;
}
function SwapOuthome(){
document.homenav.src = rollnav[9].src;
return true;
}
function SwapBackhome(){
document.homenav.src = rollnav[8].src;
return true;
}
function SwapOutcus(){
document.cusnav.src = rollnav[11].src;
return true;
}
function SwapBackcus(){
document.cusnav.src = rollnav[10].src;
return true;
}
function SwapOutlink(){
document.linknav.src = rollnav[13].src;
return true;
}
function SwapBacklink(){
document.linknav.src = rollnav[12].src;
return true;
}
hi im trying to create a series of rollover buttons for my site that can be used on all pages. im using the above array to switch the button images the problem is they all work up until number 9 then they just display the image set as the original image and dont change on mouse over. i try declaring an array with more than 9 spaces it doesn't seem to make a difference ive tried the new array format to with no avail. any help would be greatly appreciated. i have included my code which is embedded in my html to call the function below. Code: <A href="coolkids formal contact us.html" onMouseOver="SwapOutcus()" onMouseOut="SwapBackcus()"><img src="buttons/button 1 contact us.png" name="cusnav" align="left" ></A> <A href="information.html" onMouseOver="SwapOutlink()" onMouseOut="SwapBacklink()"><img src="buttons/button 1 links.png" name="linknav" align="left" ></A> Hello. I want to display some text in some part of website when user "rolls over" an image. How can I make it possible? Text position must be totally flexible. (not over image) Hi friends, Im new with JS. How to make the roll over effect in JS. An image, on roll over, the big size of the same image needs to appear. regards anoop Could some one help me with achieving a roll over effect? Not the type where you hover over a link and a image appears and then you move away from the link and it disappears but rather like the ones viewable in the roll over section here @ www.dailyscience.com - that is you hover over a link and text and an image appears but then you move away and it still remains until you hover over another link? I'm a novice to javascript and am still learning so any help would really be appreciated, thanks! PS I realise there is a connection to the HTML code as this is where the content lies but interlinking this with my desired effect is rather annoying. Once again thanks. I want to mouse over a symbol (or coordinate) on an image and have a photograph appear of the real life item. Is there a code that could be used for doing this? Any help appreciated. Can anyone show me the code for a simple expanding navigation bar? I need to roll over the nav bar and for it to drop down with more options. I know the code will be straight forward, I can't work it out though. Thanks whoever can help = ) Hey folks.. Hope you can help, I'm completely new to this and have no knowledge at all when it comes to javascript. Have been using this script on my site for a while. Is there anyway I can add a URL link to the images that are in my selector? When clicked would go to that page on my website. Thanks in advance of any help Nat <script language="JavaScript"> /* Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com) For this script and more, visit http://www.javascriptkit.com */ var delay=10000 //set delay in miliseconds var curindex=0 var randomimages=new Array() randomimages[0]="http://www.anywebsite.com/images/splash1.jpg" randomimages[1]="http://www.anywebsite.com/images/splash2.jpg" randomimages[2]="http://www.anywebsite.com/images/splash3.jpg" randomimages[3]="http://www.anywebsite.com/images/splash4.jpg" randomimages[4]="http://www.anywebsite.com/images/splash5.jpg" var preload=new Array() for (n=0;n<randomimages.length;n++) { preload[n]=new Image() preload[n].src=randomimages[n] } document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">') function rotateimage() { if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){ curindex=curindex==0? 1 : curindex-1 } else curindex=tempindex document.images.defaultimage.src=randomimages[curindex] } setInterval("rotateimage()",delay) </script> Got the code he http://www.javascriptkit.com/script/cut173.shtml Using the code he http://www.lousshirtshack.com/Rouse-...t_p_2860.html# I have the top 2 pulldown selections live with images mapped. Do you guys see any reason why it won't change when I pull down? I have a tutorial I have to complete for my web class out of the "New Perspectives HTML, XHTML, and Dynamic HTML 4th edition book" (the tutorial I'm doing is number 10) and I can't figure out how to get the numbers to show up. Here is the code that is given to start out with. Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on HTML and XHTML 5th Edition
Tutorial 10
Review Assignment
Monroe Public Library
Author:
Date:
Filename: mpl2.htm
Supporting files: mpl2.jpg, mplstyles.css, random.js, 0.jpg - 9.jpg
-->
<title>Monroe Public Library</title>
<link href="mplstyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageContent">
<div id="head">
<img src="mpl.jpg" alt="Monroe Public Library" />
</div>
<div id="links">
<span>Quick Links</span>
<a href="#">Home Page</a>
<a href="#">Online Catalog</a>
<a href="#">Friends of MPL</a>
<a href="#">New Books and Other Good Reading</a>
<a href="#">Ohio Virtual Library</a>
<a href="#">Internet Public Library</a>
<a href="#">Services and Collection</a>
<a href="#">Adult Programs</a>
<a href="#">Teen Central</a>
<a href="#">Children's Room</a>
<a href="#">Computers at MPL</a>
<a href="#">Computer Rules and Procedures</a>
<a href="#">Staff Directory</a>
<a href="#">Library Records</a>
</div>
<div id="main">
<h2>Library Records</h2>
<p>To view the library records, enter your username and password.</p>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>Username</th>
<td><input size="20" /></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" size="20" /></td>
</tr>
<tr>
<td>As a final security check, enter the 5 numbers
you see displayed below.</td>
<td><input size="6" /></td>
</tr>
<tr>
<td colspan="2" class="center">
<input type="button" value="View Library Records" />
</td>
</tr>
<tr>
<td colspan="2" class="center">
</td>
</tr>
</table>
</div>
<address>
<b>Monroe Public Library</b>
580 Main Street, Monroe, OH 45050
<b>Phone</b>(513) 555-0211
<b>Fax</b>(513) 555-0241
</address>
</div>
</body>
</html>
Then these are the directions given in the book. 1. In the head section, just above the closing </head> tag, insert a script element that accesses the code in the random.js file. 2. add a second script element for the cod e that you'll add to the mpl2.htm file 3. Within the second script element, create a function named showImg(). The purpose of this function is to write an inline image tag into the current document. The function has no parameters. Add the following statements to the function: a. Add the following multiline comment to the start of the function, just below the opening showImg() function statement. The showImg() function displays a random image from the 0.jpg through 9.jpg files. The random image is designed to thwart hackers attempting to enter the library records database by requiring visual confirmation. b. Declare a variable named imgNumber equal to the value returned by the randomInteger() function. Use 9 as a value of the size parameter in the randomInteger() function. c. append the statement that creates the imgNumber variable with the following single-line comment: Return a random number from 0 to 9 d. inster a command that writes the text <img src='imgNumber.jpg' alt='' /> to the document, where imgNumber is the value of the imgNumber variable. 4. scroll down to the bottom of the file and locate the last table cell in the document. Within this empty table cell, insert a script element. 5. within the script element, call the showImg() function five times. YOu do not need to specify a parameter value. ___________________________ It's a lot of info but I just can't figure out how to get the images to show up, any help will be appreciated, I think I gave all the info needed. Hi there, I hope this is the right board, I'm pretty sure it's Javascript I want, but I need to put it in a forum so I'm limited to HTMl and JS. I have pretty much no experience with JS but am alright at HTML... a simplified and expanded explanation would be nice. So I'm looking for an image randomiser code with just a simple box, and a button that says 'Generate' and then 5 images appear. This would be easy by itself, it's just that I want some of the images to be more likely to appear than others. I was thinking of putting them in different sets: 'common' 'uncommon' 'rare' and having the randomiser have a 60% chance taking images from common, 30% from uncommon, and 10% from rare, for example. Is this possible? If so, I'd love some help! hi i have the site xtcservers.co.uk and i have downloaded a script for a horizontal image scrolling box. i am not a very good coder and would appreciate some help. here is the code: Code: //Specify the slider's width (in pixels) var sliderwidth="300px" //Specify the slider's height var sliderheight="150px" //Specify the slider's slide speed (larger is faster 1-10) var slidespeed=1 //configure background color: slidebgcolor="#EAEAEA" //Specify the slider's images var leftrightslide=new Array() var finalslide='' leftrightslide[0]='<a href="http://"><img src="images/uploaded/_sfpg_data/thumb/" border=1></a>' //Specify gap between each image (use HTML): var imagegap=" " //Specify pixels gap between each slideshow rotation (use integer): var slideshowgap=9 at the part were you specify the images to use is there a way to use a folder of images insdead of specifying each one for it to scroll trough. also os there a way to center the scroll box if you have a look the box is to the left. thanks lee hi, which is the first code in javascript to load an image from my computer and then to automatically resize it to me ... as in the facebook thanks
|
|||||||