|
JavaScript - Rollover Script ---- Need Help To Check
Hi all
I have this rollover script (original done by Old Pedant) which I have modified making it 5 sets of 2 images. Althogh it seems to work I have a feeling it's not the best way of doing it hahahaha It seems clumsy to me (and i'm no coder hahaaha) Could it be made more concise. (or just made correct) Would really appreciate any help or positive comments. Code: <script type="text/javascript">
function linkOver(link)
{
var image = link.getElementsByTagName("IMG")[0];
image.src = image.src.replace("Off_1.png","On_1.png");
image.src = image.src.replace("Off_2.png","On_2.png");
image.src = image.src.replace("Off_3.png","On_3.png");
image.src = image.src.replace("Off_4.png","On_4.png");
image.src = image.src.replace("Off_5.png","On_5.png");
}
function linkOut(link)
{
var image = link.getElementsByTagName("IMG")[0];
image.src = image.src.replace("On_1.png","Off_1.png");
image.src = image.src.replace("On_2.png","Off_2.png");
image.src = image.src.replace("On_3.png","Off_3.png");
image.src = image.src.replace("On_4.png","Off_4.png");
image.src = image.src.replace("On_5.png","Off_5.png");
}
</script>
</head>
I have 5 of these: Code: <body>
<div id="megaanchor" onmouseover="linkOver(this), callSecondFunction('soldier',50,40,200);" onmouseout="linkOut(this);" ><img src="images/image_Off.png" alt="" border="0" />
</body>
Similar TutorialsHi, I have a a-z brand menu on my site. I want the user to be able to select a letter and a list of brands appear. The problem I have is that I want the layer to appear at the position of the mouse (from the top left). I have this working fine but then when you rollover a link (brand) within the layer div it reactivates the call command and re positions the layer to the mouse again. Please Please help. My code is as follows; POSITION CODE; Code: var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+5) + "px";
d.style.top = (cY+5) + "px";
}
TOGGLE HIDE SHOW LAYER; Code: function toggle_visibility(id) {
var e = document.getElementById(id);
AssignPosition(e);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
EXAMPLE OF A-Z MENU; Code: <a href="#" onclick="toggle_visibility('uniquename0');">A</a>
EXAMPLE OF LAYER TO DISPLAY WHICH CONTAINS THE OFFENDING LINKS; Code: <div id="uniquename0" style="border-style: solid; padding: 5px; display: none; position: absolute; background-color: white; left: 482px; top: 428px;" onmouseout="toggle_visibility('uniquename0');">
<a href="Manufacturer-view.asp?ManID=1">All American EFX <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>
<a href="Manufacturer-view.asp?ManID=3">Animal <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>
</div>
Thank you Dan 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. plz check bold part of function is not working. what is wrong with it.? Code: function onesizecheck(chk_id,siz) {
alert(chk_id);
if(document.getElementById('siz_check').value=='')
{
document.getElementById('siz_check').value=siz;
}//end if
if(document.getElementById('siz_check').value==siz) {
document.getElementById('siz_check').value=siz;
}
else {
alert('Multi size are not allowed.');
for(var i = 0; i < document.delet['checkbox[]'].length; i++){
var cb = document.getElementById('checkbox');
alert(cb[i].value);
}
}
}//end function
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! Hi all, I am writing an administration panel for a web site. I want to check if the client's browser javascript enabled and if it is not enabled, a warning DIV comes telling the client to enable javascript and disable the actual page (make the actual page non-usable). Is there a way to do that? Thanks in advance telmessos Hello all, Sorry for not reading the "posting guidelines" earlier. I understand that you guys are not reading/loading complete codes, my bad. Let me try again. This is a code for checking numbers A1 -> B1, when there is a match, the code will be green, otherwise black. Can somebody explain to me how I can extend this script, that more then one array is checked?? Code: <script type = "text/javascript">
var a1 = ["2","5", "11","16","23","45", "46"];
var b1 = ["2","3","8","12","23", "37", "41", "45", "48"]
for (var i = 0; i< a1.length; i++) {
for (var j = 0; j< b1.length; j++) {
if (a1[i] == b1[j]) {
a1[i]= "g"+ a1[i];
}
}
}
for (var i = 0; i< a1.length; i++) {
if (a1[i].substr(0,1) == "g") {
a1[i] = a1[i].substr(1,20);
document.write("<font color = 'green'>", a1[i] + "    ");
}
else {
document.write("<font color = 'black'>", a1[i] + "    ");
}
}
document.write("<br><br>");
for (var j = 0; j< b1.length; j++) {
document.write("<font color = 'black'>", b1[j] + "    ");
}
</script>
Thanks a ton in advance On this webpage http://www.corkdiscos.com/testimonials.html i have a like button. when a user clicks like a comment box appears. when i unlike the button the comment box disappears this is ok but when a user has already liked the facebook page and comes to my webpage the comment box does not show. so im looking for a piece of javascript to check if a user has like the button on my page and if so to show the comment box. please check my source code of the website http://www.corkdiscos.com/testimonials.html to see what i have so far. any help would be greatly appreciated hello there this is in vb script. but i dont where to post it. can any one hlep me out plzz I need to check if the date entered by user is within 5th date from current date. I am trying to do it this way entered date has month and date value Code: sResvDate = 01/24 Set sMaxDays to getdate(5) but get date will give year too. and how do i compare if it less than 5th day or not. Hi guys. I'm working a bunch of pre existing code on a CMS. Just after a quick fix. Doing a show/hide thing on a particular div somewhere on the page depending if a checkbox is ticked or not. Currently there is 3 checkboxes that are dynamically added through the CMS. Here's simplified version of the form: Code: <form id="simplesearch" name="simplesearch"> <input type="checkbox" onclick='showhidefield(this.value)' name="meta_data_array_search_criteria[custom_profile_type][]" value="5" class="input-checkboxes" /> <input type="checkbox" onclick='showhidefield(this.value)' name="meta_data_array_search_criteria[custom_profile_type][]" value="4" class="input-checkboxes" /> </form> And here's the javascript I was playing with. Code: function showhidefield(id)
{
if(document.simplesearch.meta_data_array_search_criteria[custom_profile_type][''].checked) {
document.getElementById("profile_fields_wrapper_" + id).style.visibility = "visible";
}
else
{
document.getElementById("profile_fields_wrapper_" + id).style.visibility = "hidden";
}
}
Problem I'm having is how do i do a check to see if those checkboxes are checked in the javascript with those name arrays? How do i separate them? 'm guessing I have to loop through them or something?Hopefully that make senses - it's late here and I'm losing the plot Any pointers would be gratefully welcomed 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? 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. 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>
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! This JavaScript is linked externally and was written to add a hover action to navigation links. It downloads quick and works great, however, the code is written to apply to all image links on the page. I need a declaration that will make the action apply Only to the navigation links. Not sure the best approach here. getElementById, or another var? Any insight is greatly appreciated. JavaScript: 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 = rollOut; thisImage.overImage = new Image(); thisImage.overImage.src = "images/navbar/" + thisImage.id + "_ro.jpg"; thisImage.onmouseover = rollOver; } function rollOut() { this.src = this.outImage.src; } function rollOver() { this.src = this.overImage.src; } HTML(intended for this application): <div id="navigation"> <ul> <li><a href="index.html" target="_self" class="nav_home"><img src="images/navbar/home_tab.jpg" alt="home_tab" id="home_tab" /></a></li> <li><a href="aboutus.html" target="_self" class="nav_about"><img src="images/navbar/about_tab.jpg" alt="about_tab" id="about_tab" /></a></li> <li><a href="quartets.html" target="_self" class="nav_quartet"><img src="images/navbar/quartets_tab.jpg" alt="quartets_tab" id="quartets_tab" /></a></li> <li><a href="events_calender.html" target="_self" class="nav_event"><img src="images/navbar/events_tab.jpg" alt="events_tab" id="events_tab" /></a></li> <li><a href="members.html" target="_self" class="nav_members"><img src="images/navbar/members_tab.jpg" alt="members_tab" id="members_tab" /></a></li> </ul> </div> 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 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, I am needing some help with the mootools script. I have uploaded a test page at http://74.52.32.68/~tempcom/slider/ Here is what I am attempting to do. When I click on one of the items (say Landscapes), I want some corresponding text to appear in the green box above. Is this possible? Would it be a javascript? Any sample codes or assistance would be greatly appreciated. Thanks in advance! |
|||||||