|
JavaScript - Rollover Buttons Help
I'm having trouble with a 3-state rollover with rollClick staying active for a series of buttons. Each button reveals it's own content within the same page.
Here's a working example of what I have. The roll in and out works fine at first, but after the second click the images start getting jumbled together. Something to do with the lastClick code at the bottom I think. HTML-side my button images get class="rollover" and a unique id. Code: window.onload = rolloverInit;
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
function rolloverInit(){
var rollOvers = document.getElementsByClassName("rollover");
for(var i=0; i<rollOvers.length; i++){
setupRollover(rollOvers[i]);
}
}
function setupRollover(thisImage){
//UP
thisImage.outImage = new Image();
thisImage.outImage.src = "images/" + thisImage.id + "1.gif";
thisImage.onerror = thisImage;
thisImage.onmouseout = rollOut;
//OVER
thisImage.clickImage = new Image();
thisImage.clickImage.src = "images/" + thisImage.id + "2.gif";
thisImage.onerror = rollOut;
thisImage.onmousedown = rollClick;
//DOWN
thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.id+"2.gif";
thisImage.onerror = rollOut;
thisImage.onmouseover = rollOver;
thisImage.onmouseup = rollOver;
}
function rollOver() {
this.src = this.overImage.src;
}
function rollOut() {
this.src = this.outImage.src;
}
function rollClick() {
if(lastClick){
lastClick.onmouseout = rollOut;
lastClick.src = this.outImage.src;
}
this.src = this.clickImage.src;
this.onmouseout = rollClick;
lastClick = this;
}
var lastClick = null;
What I'd also like, since these buttons act as tabs, is for the first button to already be in the rollClick active state on page load (since that button's content is already displayed by default). Is this possible? Thanks for any help you can provide! Similar TutorialsCurrently i have rollover images when click on active a hide show div tag with the css property. the problem is that i want to keep the buttons on active state till someone clicks on another button then the button returns to a down state and the new button that was click on stay up. Code: <script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('a1','a2','a3','a4', 'a5','a6');
function switchid(id){
hideallids();
showdiv(id);
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
please help Hi guys, thanks in advance for any help, i'm having trouble with rollover buttons. I have a monthly listings calendar for a nightclub and need to make web-flyers appear when the user scrolls over each particular date. You can see the calendar he http://www.stepintothearena.co.uk/2010/01jan/index.html All of the javascript I can find simply swaps the image for one of the same size, whereas I need the'on' image to be bigger and act as a sort of popup image. I've tried to explain this as best possible, will check back regularly for replies. Thankyou Hey guys, Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer. I'm trying to design myself an online portfolio; here's what I got so far... http://www.gregorymstevens.com/testsite/site.html As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page. For instance, when the mouse rolls over a bird-- this image: will turn into this image: while maintaining the original "white bird" rollover. Hopefully I'm explaining this correctly -- Any help greatly appreciated! I have a div in my HTML that that when rolled over reveals an image. I can't figure out how to place a random image from a set of 5 images to appear in the background of that div when it is rolled over again. Please help me! I have a small .png on my site. I want to view at 250% when I rollover it. Is there a way to have the 250% .png be centered vertically and horizontally where the 100% without making the 100% .png 250% bigger (ex. extra white space). Any recommendations for other ways? Okay so I am fairly new to Javascript and am having some difficulties getting this rollover to work. I've gotten this rollover code to work in multiple other pages and for some reason it just wont work for this page. The code is below, basically I have three buttons on the page that need to have a rollover effect to display an alternate image for each button, I started small to try and get just the first one to work and have not had any luck. Tried three different browsers, nothing. Any advice will be greatly appreciated. Code:
<html>
<head>
<title>Ski Montana</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
if (document.images) {
photosUp = new Image
photosDown = new Image
photosUp.src = 'photosup.gif'
photosDown.src = 'photosdown.gif'
}
var images = new Array(3);
images[0] = new Image();
images[1] = new Image();
images[2] = new Image();
images[0].src ="bannerad1.jpg"
images[1].src ="bannerad2.jpg"
images[2].src ="bannerad3.jpg"
var outElm;
var currentImageIndex = 0;
var maxImageIndex = images.length-1;
function cycle(){
if (outElm) {
outElm.src = images[currentImageIndex].src;
++currentImageIndex;
if (currentImageIndex > maxImageIndex) {
currentImageIndex = 0;
}
}
}
function initImageCycler(elmID){
outElm = document.getElementById(elmID);
if (outElm) {
setInterval("cycle()", 2000);
}
}
//-->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF" onload="initImageCycler('adBanner');">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="15" height="6" valign="top"></td>
<td width="103" height="6" valign="top"></td>
<td width="10" height="6" valign="top"></td>
<td width="9" height="6" valign="top"></td>
<td width="176" height="6" valign="top"></td>
<td width="1" height="6" valign="top"></td>
<td width="96" height="6" valign="top"></td>
<td width="1" height="6" valign="top"></td>
<td width="209" height="6" valign="top"></td>
<td width="11" height="6" valign="top"></td>
<td width="6" height="6" valign="top"></td>
<td width="133" height="6" valign="top"></td>
</tr>
<tr>
<td width="15" height="89" valign="top"></td>
<td width="103" height="89" valign="top"></td>
<td width="10" height="89" valign="top"></td>
<td width="503" height="89" colspan="7" valign="top"><img src="bannerad1.jpg" width="503" height="68" id="adBanner" alt="Ad Banners" /></td>
<td width="6" height="89" valign="top"></td>
<td width="133" height="89" valign="top"></td>
</tr>
<tr>
<td width="15" height="108" valign="top"></td>
<td width="103" height="108" valign="top"></td>
<td width="10" height="108" valign="top"></td>
<td width="9" height="108" valign="top"></td>
<td width="483" height="222" colspan="5" rowspan="3" valign="top">
<h1 align="center"><b><font size="+7">Welcome to Montana</font></b></h1>
<h2 align="center"><font size="+7"><b><font size="+3">Home of the Wild West
and some of the Best Ski Slopes in the World</font></b></font></h2>
</td>
<td width="11" height="108" valign="top"></td>
<td width="6" height="108" valign="top"></td>
<td width="133" height="108" valign="top"></td>
</tr>
<tr>
<td width="15" height="2" valign="top"></td>
<td width="103" height="2" valign="top"></td>
<td width="10" height="2" valign="top"></td>
<td width="9" height="2" valign="top"></td>
<td width="11" height="2" valign="top"></td>
<td width="6" height="2" valign="top"></td>
<td width="133" height="114" rowspan="2" valign="top"><img src="skiban2.jpg" width="130" height="99"></td>
</tr>
<tr>
<td width="15" height="112" valign="top"></td>
<td width="103" height="158" rowspan="2" valign="top"><img src="montana1.gif" width="103" height="115"></td>
<td width="10" height="112" valign="top"></td>
<td width="9" height="112" valign="top"></td>
<td width="11" height="112" valign="top"></td>
<td width="6" height="112" valign="top"></td>
</tr>
<tr>
<td width="15" height="46" valign="top"></td>
<td width="10" height="46" valign="top"></td>
<td width="9" height="46" valign="top"></td>
<td width="176" height="46" valign="top"></td>
<td width="97" height="46" colspan="2" valign="top"><a href="photos.htm" onMouseover="document.rollover.src=photosDown.src" onMouseout="document.rollover.src=photosUp.src"><img name="rollover" src="photosup.gif" border=0></a></td>
<td width="1" height="46" valign="top"></td>
<td width="209" height="46" valign="top"></td>
<td width="11" height="46" valign="top"></td>
<td width="6" height="46" valign="top"></td>
<td width="133" height="46" valign="top"></td>
</tr>
<tr>
<td width="15" height="44" valign="top"></td>
<td width="103" height="44" valign="top"></td>
<td width="10" height="44" valign="top"></td>
<td width="9" height="44" valign="top"></td>
<td width="176" height="44" valign="top"></td>
<td width="1" height="44" valign="top"></td>
<td width="97" height="44" colspan="2" valign="top"><a href="resorts.htm" onMouseover="document.rollover.src=resortsdown.src" onmouseout="document.rollover.src=resortsup.src"><img src="resortsup.gif" width="97" height="30" border="0" name="rollover"></a></td>
<td width="209" height="44" valign="top"></td>
<td width="11" height="44" valign="top"></td>
<td width="6" height="44" valign="top"></td>
<td width="133" height="44" valign="top"></td>
</tr>
<tr>
<td width="15" height="49" valign="top"></td>
<td width="103" height="49" valign="top"></td>
<td width="10" height="49" valign="top"></td>
<td width="9" height="49" valign="top"></td>
<td width="176" height="49" valign="top"></td>
<td width="97" height="49" colspan="2" valign="top"><a href="contactus.htm" onmouseover="document.rollover.src=contactusdown.src" onmouseout="document.rollover.src=contactusup.src"><img src="contactusup.gif" width="97" height="30" border="0" name="rollover"></a></td>
<td width="1" height="49" valign="top"></td>
<td width="209" height="49" valign="top"></td>
<td width="11" height="49" valign="top"></td>
<td width="6" height="49" valign="top"></td>
<td width="133" height="49" valign="top"></td>
</tr>
<tr>
<td width="15" height="1" valign="top"><img width="15" height="1" src="transparent.gif"></td>
<td width="103" height="1" valign="top"><img width="103" height="1" src="transparent.gif"></td>
<td width="10" height="1" valign="top"><img width="10" height="1" src="transparent.gif"></td>
<td width="9" height="1" valign="top"><img width="9" height="1" src="transparent.gif"></td>
<td width="176" height="1" valign="top"><img width="176" height="1" src="transparent.gif"></td>
<td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
<td width="96" height="1" valign="top"><img width="96" height="1" src="transparent.gif"></td>
<td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
<td width="209" height="1" valign="top"><img width="209" height="1" src="transparent.gif"></td>
<td width="11" height="1" valign="top"><img width="11" height="1" src="transparent.gif"></td>
<td width="6" height="1" valign="top"><img width="6" height="1" src="transparent.gif"></td>
<td width="133" height="1" valign="top"><img width="133" height="1" src="transparent.gif"></td>
</tr>
</table>
</body>
</html>
Hello, my first post here; and i am new to javascript i actually am just starting to learn the concept of javascript; and I am wondering.... if certain aspects of a website are made by using javascript such as the part on facebook "My Account"; where on click it opens a "window" with options. OR, on amazon where the menu items pop out on rollover;; can someone please tell me if they are acomplishing that by using javascript? thank you and i appreciate who ever is reading this. Hello: I am a newbie to learning Javascript. I have some problems with a file. The goal of the file is that when it loads in a browser, the 1st image is displayed in the top left (image 7441805.gif), along with the following three titles to the right of the image, as listed below: Java Demystified OOP Demystified Data Structures Demystified When you place the mouse over "Java Demystified," the 7441805.gif image should still appear (which it does)), and a new window should pop-up and stay on the screen displaying "10% Discount for Java Demystified" until the user decides to do away with the new window by clicking on the "X". The new window does appear for about less than a second , and then goes away (actually it continuously flashes on and off very quickly), which is not what I want. When you place the mouse over "OOP Demystified," the 0072253630.jpg image should appear (which it does), and a new window should pop-up and stay on the screen displaying "20% Discount for OOP Demystified" until the user decides to do away with the new window by clicking on the "X". The new window does appear for about less than a second , and then goes away (actually it continuously flashes on and off very quickly), which is not what I want. When you place the mouse over "Data Structures Demystified," the 7417436.gif image should appear (which it does), and a new window should pop-up and stay on the screen displaying "15% Discount for Data Structures Demystified" until the user decides to do away with the new window by clicking on the "X". The new window does appear for about less than a second , and then goes away (actually it continuously flashes on and off very quickly), which is not what I want. All of the files are loaded on my laptop, which is using Vista, is 32bit, has the IE9 browser installed, and pop-ups are disabled. When I try to use Mozilla (version 6.0), I am unable to disable the pop-ups, and therefore can not even get any new windows to open. I would appreciate your help. The html file is below: [CODE]<!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" lang="en" xml:lang="en"> <head> <title>Open Window</title> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="description" content="XYZ" /> <meta name="keywords" content="XYZ" /> <!-- the absolute pathname of this file is: --> <!-- C:\MISCSUP2_10_17_8\MISCSUP2\Javascript_Demystified_Download_Working\ --> <!-- Ch_12_Page241.html --> <!-- this file was created on Wednesday, 8/24/11: --> <!-- this file was updated on Wednesday, 8/24/11: --> <script language="Javascript" type="text/javascript"> <!-- function OpenNewWindow(book) { if (book== 1) { document.cover.src='7441805.gif' MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="400"') MyWindow.document.write('10% Discount for Java Demystified!') } if (book== 2) { document.cover.src='0072253630.jpg' MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="500"') MyWindow.document.write('20% Discount for OOP Demystified!') } if (book== 3) { document.cover.src='7417436.gif' MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="600"') MyWindow.document.write("15% Discount for Data Structures Demystified!") } } --> </script> </head> <body> <table width="100%" border="0"> <tbody> <tr valign="top"> <td width="50"> <a> <img height="92" src="7441805.gif" width="70" border="0" name="cover"> </a> </td> <td> <img height="1" src="" width="10"> </td> <td> <a onmouseover="OpenNewWindow(1)" onmouseout="MyWindow.close()"> <b><u>Java Demystified </u></b> </a> <br> <a onmouseover="OpenNewWindow(2)" onmouseout="MyWindow.close()"> <b><u>OOP Demystified</u></b> </a> <br> <a onmouseover="OpenNewWindow(3)" onmouseout="MyWindow.close()"> <b><u>Data Structures Demystified</u></b> </a> </td> </tr> </tbody> </table> </body> </html>[ICODE] Hi Guys, I'm creating what is hoped to be a fun and slightly different page for Christmas. I am looking to have about 6 'dangling' objects, each that bounce on rollover (currently working) and that play a different note/tune. At the moment you will see in the code that I am using HTML5 to do this - whilst I am ok with this (I will create a flash fall back) I am unable to work out how to play a different sound for each rollover. Of course if there is a more cross browser friendly solution I'm all ears... Any help much appreciated! Please see below code... Quote: <!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="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script> // Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com) // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code //** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc) //** Call: uniquevar.playclip() to play sound var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list: "mp3": "audio/mpeg", "mp4": "audio/mp4", "ogg": "audio/ogg", "wav": "audio/wav" } function createsoundbite(sound){ var html5audio=document.createElement('audio') if (html5audio.canPlayType){ //check support for HTML5 audio for (var i=0; i<arguments.length; i++){ var sourceel=document.createElement('source') sourceel.setAttribute('src', arguments[i]) if (arguments[i].match(/\.(\w+)$/i)) sourceel.setAttribute('type', html5_audiotypes[RegExp.$1]) html5audio.appendChild(sourceel) } html5audio.load() html5audio.playclip=function(){ html5audio.pause() html5audio.currentTime=0 html5audio.play() } return html5audio } else{ return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}} } } //Initialize two sound clips with 1 fallback file each: var mouseoversound=createsoundbite("whistle.ogg", "whistle.mp3") </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <style type="text/css"> body { background-color: #FFF; } div { padding:0px; width:116px; height:211px; text-align:center; float:left; display:block; } </style> </head> <body> <div id="bouncy1"> <a href="#" onmouseover="mouseoversound.playclip()"><img src="creation_logo.gif" width="116" height="211" border="0" /></a></div> <div id="bouncy2"> <a href="#" onmouseover="mouseoversound.playclip()"><img src="creation_logo.gif" width="116" height="211" border="0" /></a></div> <SCRIPT> $(function(){ //Add bounce effect on Click of the DIV $('#bouncy1').mouseenter(function () { $(this).effect("bounce", { times:3 }, 500); }); $('#bouncy2').mouseenter(function () { $(this).effect("bounce", { times:3 }, 300); }); }); </SCRIPT> </body> </html> I am using a script from Dynamic Drive and have posted this on their forum as well, with no luck. The script looks great in every browser but IE. When you hover over the parent page and the child pages show up, they go away when you start to scroll down. Any idea of a fix? The script is below. I have it sitting in its own js file within my Wordpress theme. Code:
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
My site is he http://www.computerdepot-online.net/ Hello all - I am new to JS and figure this is probably an easy fix. I have a wordpress self-hosted site. I am doing a nav bar with rollovers. I have the script saved as a js file and in the right directory. I have the Code: <script src="<?php bloginfo('template_directory'); ?>/js/menu.js" type="text/javascript"></script>
in the header.php file just after the body tag. I have the styles where I want them in the CSS file. And lastly I have the html and the appropriate wordpress php call in the right spot. The css is working fine, which leads me to believe my css and html are spot on. But there is no rollover working. Do I need to put anything besides styling into my css file? Any help is much appreciated. Thanks. I'm having an issue with the main logo in the navigation bar, each time I hover over it, it searches for the rollover image. I only want this javascript function to be activated over the div "navigation_menu" here's the html code for the logo <div id="nav"> <a href="index.php"> <img src="images/logo_05.jpg" alt="Home Page"/></a> </div><!-- nav --> here's the javascript code that's causing the problems window.onload = rolloverInit; function rolloverInit() { var nav = document.getElementById("navigation_menu"); for (var i=0; i<nav.images.length; i++) { if (nav.images[i].parentNode.tagName == "A") { setupRollover(nav.images[i]); } } } any help would be very appreciated OK, I want several of my images on my webpage to change when the user hovers over the graphic. I created the js and it works fine. However, now all of my (linked) images change when I hover over them. I know what's causing this ( the Code: ( document.images[i].parentNode.tagName =="A" ) part), but not sure what the best way to fix it would be. Any advice? window.onload=rolloverInit; function rolloverInit( ) { for ( var i=0; i<document.images.length; i++) { if ( document.images[i].parentNode.tagName =="A" ) { setupRollover( document.images[i]); } } } function setupRollover(thisImage) { thisImage.outImage =new Image(); thisImage.outImage.src= thisImage.src; thisImage.onmouseout=function() { this.src=this.outImage.src; } thisImage.overImage = new Image(); thisImage.overImage.src= "images/" + thisImage.id + "_on.jpg"; thisImage.onmouseover= function( ) { this.src=this.overImage.src; } } [/CODE] I am having trouble I can target two iframe windows at the same time using a Text Link, However I have not found a way to do this using a roll over image. Here is the Two codes I know. Can anyone help me please.... (roll over image) In the <head> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin loadImage1 = new Image(); loadImage1.src = "http://www.midwestfishing.org/pics/01_info_blue.gif"; staticImage1 = new Image(); staticImage1.src = "http://www.midwestfishing.org/pics/01_info_black.gif"; ........................................................... (button) <a href="info.html" rel="nofollow" target="frame1" onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=staticImage1.src;"> <img name="image1" src="http://www.midwestfishing.org/pics/01_info_black.gif" border=0></a> ........................................................... (two frames at once text) In the <head> <script language="javascript"> function loadTwo(iframe1URL, iframe2URL) { parent.frame1.location.href=iframe1URL parent.frame2.location.href=iframe2URL } </script> ........................................................... (button) <a href="javascript:loadTwo('info.html','home.html')">info</a> Thanks! I want to create something similar to what they achieve with this script: http://www.magictoolbox.com/magiczoom/ I know I could just download their script, but it's for a website that will be commercial in nature, and my cousin doesn't want to pay 29 pounds (which is a lot in AUD!) for it. I can use a rollover to display a larger image next to it, but I'm not sure on how to make the image move like that one does. Any help or suggetions would be greatly appreciated! Originally she just wanted something like the Lightbox script, so it's annoying her changing her mind now! Hi Guys, I hope this is a good place for me to post a question. I saw some responses referring to this and I hope as a newcomer my question is not booed! :) I am attempting to compound a rollover effect I have currently working at this page. The 4 numbered buttons make the larger image next to it change upon on roll over. I would like the buttons themselves also to have a rollover state. In my code below, I simply added a space in my JS script after the portion of the script that I know is working ends and added the newer code referring to 71, or rollimg71 (an arbitrary number). The area that says //button rollover effect is the code I added that does not break the site but does not work correctly. My JS <code> // JavaScript Document //gallery rollover effect if (document.images) { image0 = new Image; image1 = new Image; image2 = new Image; image3 = new Image; image0.src = 'ectonymimages/newsletter1.jpg'; image1.src = 'ectonymimages/newsletter2.jpg'; image2.src = 'ectonymimages/newsletter3.jpg'; image3.src = 'ectonymimages/newsletter4.jpg'; } else { image0 = ''; image1 = ''; image2 = ''; image3 = ''; document.rollimg = ''; } //button rollover effect if (document.images) { image71a = new Image; image71b = new Image; image71a.src = 'ectonymimages/newsletter1_link.gif'; image71b.src = 'ectonymimages/newsletter1_linkselected.gif'; } else { image71a = ''; image71b = ''; document.rollimg71 = ''; } </code> My HTML <code> <div style="float:left; padding:10px 0 0 25px;"> <span onmouseover="document.rollimg.src=image0.src;" onmouseover="document.rollimg71.src=image71b.src;" onmouseout="document.rollimg71.src=image71a.src;"><img src="ectonymimages/newsletter1_link.gif" alt="Newsletter 1 Button" name="rollimg71"/></span> <br /><br /><br /> <span onmouseover="document.rollimg.src=image1.src;"><img src="ectonymimages/newsletter2_link.gif" alt="Newsletter 2 Button" /></span> <br /><br /><br /> <span onmouseover="document.rollimg.src=image2.src;"><img src="ectonymimages/newsletter3_link.gif" alt="Newsletter 3 Button" /></span> <br /><br /><br /> <span onmouseover="document.rollimg.src=image3.src;"><img src="ectonymimages/newsletter4_link.gif" alt="Newsletter 4 Button" /></span> </div> <div style="float:right; padding-right:50px;"> <img src="ectonymimages/newsletter1.jpg" align="Newsletter Example" name="rollimg"/> </div> </code> Right now, my HTML only attempts to affect the first button, but I hope to have it affecting all 4 buttons. (Presumably if I keep this same format, they would be rollimg72, rollimg73, and rollimg74 added somewhere in the JS) Further, I'll also compound an onclick function, for both the buttons and the larger images, that will open a pop up HTML window. So, my priorities are that I'd love for the buttons themselves to have a rollover effect and then also an onclick function that opens a link in a new window in addition to the rollover effect currently being used. *If I mouse over a numbered button, that numbered button changes. *If I mouse over a numbered button, depending on the numbered button doing the affecting, a larger image is displayed next to it that changes on rollover. (This step already works correctly.) *If I click on a numbered button, 1 of 4 links would open. If I click on the larger image that changes, 1 of 4 links would open. If you've read this far, thank you in advance! Heh heh, this is the 2nd time I've typed this, as the forum logged me out and deleted my entire post when I clicked "preview". Any help is much appreciated! Gentlepeople, I ask your assistance. -Marcus I have some rollover images on my website, and they don't switch until the page is finished loading. Is this standard? Is there a way to have the rollovers work when the page is still in the process of loading all the images? Thanks I have a div with an icon and some text. When the user hovers over the area, a box appears above it with a few links in the box. I want the user to be able to select any of these links, as well as have the option NOT to select these links and have the box disappear when he moves off of the box. I can't seem to achieve this with the script I'm using now - right now, as soon as the user moves off of the div/icon and moves the cursor UP to select the links in the box, the box disappears. Any ideas? Here's my JS code: Code: <script language="JavaScript">
function show_it(){
document.all.box1.style.visibility = "visible";
}
function hide_it(){
document.all.box1.style.visibility = "collapse";
}
</script>
Here's my CSS code: Code: #box1{
position: absolute;
top: -186px;
left: 147px;
visibility: hidden;
}
#socialmedia-action-items-container {position: relative; float: right;}
#box-wrapper {padding: 0 0 21px 0; height: auto; width: 160px; background: url(../images/socialmedia/sm-funnel.png) 10px bottom no-repeat; float: left;}
#box-main {padding: 10px 10px 0 10px; height: auto; width: 140px; background-color: #cc0000; float: left;}
a.box-item1 { /*flickr*/
padding: 5px 0 10px 45px;
height: 36px;
width: 100%;
color: #fff;
background: url(../images/socialmedia/flickr.png) top left no-repeat;
float: left;
font-size: 1.3em;
line-height: 0.8em;}
a.box-item1:hover {
color: #000;
background: url(../images/socialmedia/flickr-over.png) top left no-repeat;}
a.box-item1 span {font-size: 0.7em;}
a.box-item2 { /*facebook*/
padding: 5px 0 10px 45px;
height: 36px;
width: 100%;
color: #fff;
background: url(../images/socialmedia/facebook.png) top left no-repeat;
float: left;
font-size: 1.3em;
line-height: 0.8em;}
a.box-item2:hover {
color: #000;
background: url(../images/socialmedia/facebook-over.png) top left no-repeat;}
a.box-item2 span {font-size: 0.7em;}
a.box-item3 { /*twitter*/
padding: 5px 0 10px 45px;
height: 36px;
width: 100%;
color: #fff;
background: url(../images/socialmedia/twitter.png) top left no-repeat;
float: left;
font-size: 1.3em;
line-height: 0.8em;}
a.box-item3:hover {
color: #000;
background: url(../images/socialmedia/twitter-over.png) top left no-repeat;}
a.box-item3 span {font-size: 0.7em;}
Here's my HTML code: Code: <div id="socialmedia-action-items-container">
<a class="twitter" onMouseOver="show_it()" onMouseOut="hide_it()">
<span class="twitter-first">Follow Us on</span><br />
<span class="twitter-last">Twitter</span>
</a>
<div id="box1">
<div id="box-wrapper">
<div id="box-main">
<a href="#" class="box-item1">Follow us <br /><span>on Flickr</span></a>
<a href="#" class="box-item2">Follow us <br /><span>on Facebook</span></a>
<a href="#" class="box-item3">Follow us <br /><span>on Twitter</span></a> </div>
</div>
</div>
</div>
Much appreciated! I then used Dreamweaver to created the code and dropped it into Jumi but the image rollover did not work and the main image did not show. This is the code I inserted into Jumi: ################# <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j+ +].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i+ +) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> <body onload="MM_preloadImages('images/stories/Binder1.gif','images/ stories/Binder2.gif','images/stories/Binder3.gif','images/stories/ Binder4.gif','images/stories/Binder5.gif','images/stories/ Binder6.gif','images/stories/Binder7.gif','images/stories/ Binder8.gif','images/stories/Binder9.gif')"> <div id="showbox"><img id="LargeBinderImage" alt="Three Ring Binder Image" src="images/stories/BindersGallery/Binder1.gif" height="300" width="600" /></div> <div id="buttonbox"> <img src="images/stories/BindersGallery/85binder.gif" alt="85binder1" width="85" height="85" id="thumb1" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder1.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder2.gif" alt="85binder2" width="85" height="85" id="thumb2" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder2.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder3.gif" alt="85binder3" width="85" height="85" id="thumb3" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder3.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder4.gif" alt="85binder4" width="85" height="85" id="thumb4" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder4.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder5.gif" alt="85binder5" width="85" height="85" id="thumb5" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder5.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder6.gif" alt="85binder6" width="85" height="85" id="thumb6" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder6.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder7.gif" alt="85binder7" width="85" height="85" id="thumb7" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder7.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder8.gif" alt="85binder8" width="85" height="85" id="thumb8" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder8.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder9.gif" alt="85binder9" width="85" height="85" id="thumb9" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder9.gif',1)" onmouseout="MM_swapImgRestore()" /></div> <div id="descText"> ################# This works perfectly in a regular html site. Does anyone have any ideas/thoughts as to what I am doing wrong or how I can get a ROLLOVER image gallery with the thumbs in the right side of the main image. Sorry for the long post, but thanks in advance for your suggestions Archibald |
|||||||