Dual/Tri/Quad State Rollovers
Sep 13, 2002
I have seen this quesion asked in various forms but the general idea of the question is "How do I make a rollover image clickable". Usually the asker wants to have the image stay on when clicked. Here is a little script that will do that and more..
This is the main code that goes in the HEAD section of your document.
<script type="text/javascript">
<!--
/**
* Dual/Tri/Quad state rollovers from www.javascript-fx.com
* posted at and available from www.codingforums.com
* You may use this code on any website but please
* leave this comment intact.
*/
var img= new Array();
var di= document.images;
var currOn= null;
function Rollover(imgName, imgOut, imgOver, imgClick, imgClickOut)
{
if(imgClick == null)imgClick = imgOver;
if(imgClickOut == null)imgClickOut= imgClick;
var roll = new Object;
roll.out= imgOut;
roll.over= new Image();
roll.over.src= imgOver;
roll.click= new Image();
roll.click.src= imgClick;
roll.click_out= new Image();
roll.click_out.src = imgClickOut;
img[imgName] = roll;
}
function mOver(imgName)
{
di[imgName].src = (imgName != currOn) ? img[imgName].over.src : img[imgName].click.src;
}
function mOut(imgName)
{
di[imgName].src = (imgName != currOn) ? img[imgName].out : img[imgName].click_out.src;
}
function mClick(imgName)
{
if(currOn != null) di[currOn].src = img[currOn].out;
currOn = imgName;
di[currOn].src = img[currOn].click.src;
}
function mSelect(imgName)
{
mClick(imgName);
mOut(imgName);
}
/*** End the rollover code ***/
//-->
</script>
This is the code to define rollovers and is also placed in the HEAD of your document
<script type="text/javascript">
<!--
Rollover("home", "images/home_off.gif", "images/home_on.gif");
Rollover("email", "images/email_off.gif", "images/email_on.gif");
Rollover("script", "images/script_off.gif", "images/script_on.gif");
Rollover("links", "images/links_off.gif", "images/links_on.gif");
Rollover("special","images/special_off.gif","images/special_on.gif");
//-->
</script>
Where the syntax is
Rollover(Name, offImage, onImage);
Then to use the code in a rollover image the HTML in the BODY of your page should look like this
<A HREF="#"
onClick="mClick('home');"
onMouseOver="mOver('home');"
onMouseOut="mOut('home');"><img name="home"
src="images/home_off.gif" border=0></A><br>
NOTE: The name if the image must match the Rollover name
--- <img name="home"
--- Rollover("home", "images/home_off.gif", "images/home_on.gif");
If you use the script in this form you will get something like this demo
Dual State Rollovers (http://www.javascript-fx.com/post/codeforums/quadroll/QuadState2img.html)
------------------------------------------------------------------------
If you want the clicked image to be a third image you define the rollovers as follows :-
<script type="text/javascript">
<!--
Rollover("home", "images/home_off.gif", "images/home_on.gif", "images/home_clk.gif");
Rollover("email", "images/email_off.gif", "images/email_on.gif", "images/email_clk.gif");
Rollover("script", "images/script_off.gif", "images/script_on.gif", "images/script_clk.gif");
Rollover("links", "images/links_off.gif", "images/links_on.gif", "images/links_clk.gif");
Rollover("special","images/special_off.gif","images/special_on.gif","images/special_clk.gif");
//-->
</script>
Where the syntax is
Rollover(Name, offImage, onImage, clickedImage)
Which results in this demo
Tri State Rollovers (http://www.javascript-fx.com/post/codeforums/quadroll/QuadState3img.html)
------------------------------------------------------------------------------------
If you want to have a clicked image and have that clicked image also have a (different) rollover effect you define the rollovers as follows :-
<script type="text/javascript">
<!--
Rollover("home", "images/home_off.gif", "images/home_on.gif", "images/home_clk.gif", "images/home_clk_off.gif");
Rollover("email", "images/email_off.gif", "images/email_on.gif", "images/email_clk.gif", "images/email_clk_off.gif");
Rollover("script", "images/script_off.gif", "images/script_on.gif", "images/script_clk.gif", "images/script_clk_off.gif");
Rollover("links", "images/links_off.gif", "images/links_on.gif", "images/links_clk.gif", "images/links_clk_off.gif");
Rollover("special","images/special_off.gif","images/special_on.gif","images/special_clk.gif","images/special_clk_off.gif");
//-->
</script>
Where the syntax is:
View 2 Replies
ADVERTISEMENT
Nov 1, 2011
I used the code from the following article...[URL]
$(function() {
$('img[data-hover]').hover(function() {
$(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover',
[code]...
why does the rolled over image's src return to the original value when the user rolls back off it?
View 1 Replies
View Related
Jul 21, 2011
To say I'm new to JavaScript is a bit of an understatement so bear with me. I have a site set up with a variety of layers of toggles. When you enter the site all of the items are collapsed and you click the headings to expand. Each of the toggle-able items have ids. It works great for users who start at the homepage.
However, when I send people to any of the inner topics, all they see is the initial collapsed state of the site. I want to be able to provide a URL that will set the toggle to open, and show all of the content for that section on entry.
Here is my code and js, can anyone point me in the right direction?
[Code]....
View 2 Replies
View Related
Jun 1, 2010
How can I preserve the session state of a SharePoint browser state using javascript?
View 2 Replies
View Related
Jul 20, 2005
Is there a way of controlling (i.e., using windows.open ) which screen
new windows are to appear in, when I have multiple screens ?
Is that a programming issue, or does it have to do with the OS?
View 4 Replies
View Related
Apr 14, 2009
I have this code that I use to display and grab data from 2 tables in mysql into 2 dropdown menus.
When I select in dropdown menu 1 an item (with ID in database, the first table has fields: ProgrammaID, Programma).
Then in de second dropdown menu the particulair item with this same ID as the selected one in menu 1 need to be shown. The second table has fields: ProjectID, ProgrammaID, Project.
The ProgrammaID from table1 is also in table2 (designed by our previous designer).
Now I can select an item from dropdown menu 1 but the second dropdown menu isn't shown the items as should be.
Here is the code I use:
[Code]....
View 5 Replies
View Related
Oct 21, 2010
I'm after a drop down script that basically you press categories and down it drops with say one side products by category the left side and say product by price the right side.[url]... do it when you click on one of the top links I'm just not sure of the name and the most easiest to implement?
View 2 Replies
View Related
Sep 8, 2009
I am needing a dual thirty minute countdown timer. They would appear side-by-side and there would be a start button. Once the first one is finished it would automatically initiate the second.
View 1 Replies
View Related
Jul 5, 2010
I'm inexperienced with JS and I'm hoping that someone will knowCallback2)What I'm trying to achieve is for variables which come from PHP to be added to the map automatically. So far I have determined that variations on the theme of.Can someone tell me where I am going wrong? Hopefully someone looking at this is chuckling at the triviality of it!
View 5 Replies
View Related
Dec 3, 2009
I have a Javascript function that toggles a 'show/hide' table row:
//CONTROL
Code:
<a href="#" onclick="toggle('ROW 1, this)"><img src="../../Images/plus.gif" border="0" /></a>
//JAVASCRIPT
Code:
function toggle(id, obj) {
var matchingElements = new Array();
if (document.getElementsByClassName) {
[code]....
Which works fine, but what I need is something like this:
Control 1:
Toggle - ROW 1 (+ Close ROW 2 (if visible))
Control 2:
Toggle - ROW 2
View 2 Replies
View Related
Feb 2, 2011
I am attempting to make a menu that has a background image that changeswhen you rollover or click a menuitem. I've got the hover effect working fine with CSS, but am trying to implement the click event via jquery with the following:
CSS:
div.SustainResourcesMenuTabs
{ background-image: url('/images/departments/commdev/sustainability/menu_tab.jpg');
}[code]....
My process is to reset the entire menu to the inactive state, then switch on the active state for the item that was clicked. Eventually, the item that was clicked will display its corresponding body section as well. I've tried using the CSS pseudo-class "active", but since the entire div is the link, that is unavailable. I've also tried multiple variations of addClass/removeClass, toggleClass, and setAttribute/removeAttributebut nothing hasworked so far.
View 2 Replies
View Related
May 3, 2011
I have an unique requirement that needs to be able to click and move between two lists.Each list is compose of an outer <div> and several inner <div>s. When user click on one of the inner div item, it will move from one list to another. To make more sense:
<div id="LeftSelect">
<div>Item 1<div>
<div>Item 2<div>
[code]....
View 4 Replies
View Related
Jan 3, 2010
I finally got the below script working in Firefox and was really pumped about it until I realized it didn't load in Google chrome or Safari. What this script does is its a dual onclick event which makes a hidden div appear and loads an iframe within the now visible div. Here is the code, how to make this work in other browsers.
Here is the header code:
<SCRIPT type="text/javascript">
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
} else {
state = 'block';
} if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
} .....
Here is the code on the page where a link click shows the hidden div and loads the iframe contained.
<p><a href="#" onclick="showhide('div1');return loadIframe('ifrm1', '[URL]');
">show/hide me</a></p></td></tr>
<div id="div1" style="display: none; position: fixed; z-index:4;
width: 1010px; height: 500px; left: 5%; top: 15%; background-color: #f0f0f0;
border: 1px solid #000; padding: 10px;"><iframe name="ifrm1"
id="ifrm1" width="100%" height="90%" scrolling="yes" frameborder="0">
Sorry, your browser doesnt support iframes.
</iframe><p><a href="#" onclick="showhide('div1')">close</a></div>';
View 4 Replies
View Related
Jul 23, 2005
I was having a problem with rollovers, even though I do
them in a very conventional way:
function roll(i) {
document[i].src = eval(i + "_roll.src")
} // in which value passed to function is "name" attr in img tag..
but on my home page, www.francesdelrio.com, I have rollovers like this:
function doRoll(Img,newImage) {
Img.src = newImage.src;
Img.width = newImage.width; // what's the point
Img.height = newImage.height; // of these two?
}
function roll_web() {
doRoll(document.web, web_roll);
} // etc.
I'm just trying to remember why I did it like this, it was a solution
given to me by someone in this ng, I believe the problem might have been
that rollovers were not working in Opera (don't have Opera installed
anymore, can't check it out); does this mean all my other rollovers are
not working in Opera? (if you have Opera, can u pls go to
www.francesdelrio.com/resume in Opera and roll over images near top of
page and see if rollovers work? How prevelant is use of Opera? do I
need to always script taking Opera into account?
View 2 Replies
View Related
Jul 23, 2005
Is it possible to do roll overs over an area of an image. I know you can
setup up a hotspot but can a roll over be done on that particular hotsop.
Additionally, when the image changes on the roll over, can a certain area of
this new image be shown instead of the whole one?
View 3 Replies
View Related
Nov 8, 2007
Images are cached by the browser depending on the headers sent by
the server. If the server does not send sufficient information
for the browser to decide the image is cacheable, the browser
will check if the image has been updated every time you change the
src of an image (in some user settings). To overcome this you
must send suitable headers.
View 7 Replies
View Related
Mar 13, 2007
probably one thats been heard often, but i have an onmouseover and onmouseout event, which basically swaps between two images. but how can i also get it to change an image elsewhere on the same page?
View 10 Replies
View Related
Feb 2, 2004
Im working on my moms website and had this crazy idea to have rollover images for buttons.
The thing is the "mouseover" images seem to just starting to load when you hover over the link which ruins the whole effect.I used different codes, even stuff that was recomended in this forum but nothing works. ok this is what gets me: I uploaded the same page to 2 other servers and my rollovers work just fine there. Code:
View 2 Replies
View Related
Aug 6, 2002
I've just built a site for a client (in spanish), it's about 90% finished-I've uploaded it and it looks great on my computer. The problem is that on every other computer I've checked-the left nav rollovers do not work (only on my computer do they work).
View 5 Replies
View Related
Jan 18, 2003
I finally got A rollover to work but now I'm having trouble with multiple ones. The first one works fine, but none of the others do, just says that there is an error on the page. Please help as I'm about to go bold from ripping my hair out... I mean everything looks good to me. But I don't know much so here. Code:
View 1 Replies
View Related
Jun 4, 2006
My navigation buttons have rollovers and are working fine in FF, Safari, Netscape, Camino but not in IE.
Not only that but there are some weird dashes appearing between some of the buttons. I do notice that the dashes disappear when I hover the cursor over some of the buttons. Can't figure it out... Code:
View 2 Replies
View Related
Aug 29, 2009
I'm really new at JavaScript, but I thought an image map with rollover images would be a relatively basic feat... I have a large map with hotspots over individual states. I want the user to hover over a hotspot and for the main image to change, displaying information for that particular state. I've tried code that other developers have sworn works in all browsers, but still can't get the same functionality in FF or Chrome as I do in IE.
<SCRIPT language="javascript" type="text/javascript">
function swapImage(image) {
var Map = (document.getElementById) ? document.getElementById('MapWest') : (document.images) ?
[code]....
View 4 Replies
View Related
May 18, 2003
i have the following javascript code:
<!-- hide from browsers that dont support js
if(document.images)
{
about_over = new Image
about_over.src = "images/btn_about_r.gif"
about_out = new Image
about_out.src = "images/btn_about.gif"
success_over = new Image
success_over.src = "images/btn_success_r.gif"
success_out = new Image
success_out.src = "images/btn_success.gif"
}
// -->
and i am using it from within the html code in a standard way:
<a href="about.php" onMouseOver="document.about.src='images/btn_about_r.gif'" onMouseOut="document.about.src='images/btn_about.gif'"><img src="images/btn_about.gif" name="about" width="56" height="23" alt=""></a></td>
question: i don't know much about javascript. i know that the script above preloads the images but i don't understand why the images reference names ( "about_over", "about_out", etc) do not get utilized within html code. it seems to me that they should be used.
View 3 Replies
View Related
Nov 3, 2003
I need a preload script that will load say 5 images...but it need not include any coding for rollovers. I have a site that offers some info to read on the index page...so before going into the main site, and I'd like to use the time that the visitor spends on the first page to preload images that are displayed on the next page. Obviously the goal is to speed up the load-time of "page2," while not making it apparent that it's happening on "page 1" ... does that make sense? Code:
View 5 Replies
View Related
Jan 19, 2007
Without using CSS styles or linked stylesheets, I need to apply
formatting to text links that use rollover effects.
I can NOT get the underline to show using this technique:
View 5 Replies
View Related
Dec 8, 2009
i am creating a header for a webpage. the header has two text menus (no images). the first menu (menu A) is like this: link 1a / link 2a / link 3a
the second menu (menu B) is like this:
link 1b
link 2b
link 3b
i would like to use javascript/css to do the following: when you rollover link 1a, three things happen: link 1a changes color, link 1b changes color, and and link 1b adds a line of text (so it reads: link 1b : text 1b)
i would also like- and this is where i am having trouble- for the following to happen: when you rollover link 1b, link 1b changes color and adds the additional text, as well as link 1a changes color.
View 8 Replies
View Related
