|
JavaScript - Javascript Timeout Mouseover
I am a Javascript novice so please bear with me here. I made a multi level menu at http://x7.ro/proiect/produse.html -first left menu item:Raticide- by using Javascript and css. What this should do is show the sub-menu on mouseover and hide it on mouseout WITH a custom delay so people have a chance to click menu items. This seems to work except for the all needed delay. I was trying to use javascript setTimeout function but I cannot seem to make it work. Think this should be easy for a pro and Id remain indebted if any of you could help. Thanks a lot.
Below is the working code:JS and Html. Code: <SCRIPT type=text/javascript>
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
function hideElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="block"){
myLayer.style.display="none";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="block";
}
}
</SCRIPT>
Code: <A class=button onMouseOver="javascript:showElement('v-menu');return false;" onMouseOut="javascript:hideElement('v-menu');return false;" href="#"><SPAN>Raticide</SPAN></A>
<UL style="DISPLAY: none" id=v-menu class=v-menu>
<LI><A href="aaa.html">PRODIORAT</A></LI>
<LI><A href="aaa.html"> PROBRODIRAT</A></LI></UL>
Similar TutorialsHi People, I've used the Concertina Menu from Stu Nicholls on one of my websites and am trying to get the Menu slider to slide up automatically after a certain time. Currently it only slides up on a mouseclick. The working link can be found at www.atomwhale.com/share/clients/branch/website/home.html Hope someone can help me in getting this to work. thanks, Jeriel. Forgive me if this has been answered elsewhere. can anyone tell me if they are aware of the script which will allow an image button to appear, after a certain time. I'm running a sales video and I do not want the download button to appear until the end. Hope this makes sense?? I want to be able to display the whole contents of a text file containing 4 paragraphs of text, on a static web page, as soon as a video finishes playing on the page. The video is to be set to autorun as soon as the page loads in the browser. The text file mentioned above, is to remain hidden when the page initially loads and the video is playing. Please I need your advice about what JavaScript code to use to achieve this effect, and where to place the code in the HTML code of the web page. I am new to website design and the use of JavaScript code. I have seen examples of code used for the timed delay of the display of an image file, after a video has finished playing. I do not know how to apply this to the display of a text file. I do not want to convert the whole text file into an image file, as I feel this would negatively affect the search engine optimisation of the page, if there is no text content on the page. Thank you. I have a few java events attached to a couple rollover buttons. They seem to all work just great on every browser but ie8 for some reason. Code: <script type="text/javascript"src="lookbook_web/mouseovers.js">
<div id="thumb_container">
<div id="thumb1"><a href="javascript:void()"onmouseover="ShowPage('fra me1')"onclick="ShowPage('frame1')" rel="nofollow" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a href="javascript:void()"onmouseover="ShowPage('fra me2')"onclick="ShowPage('frame2')" rel="nofollow" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a href="javascript:void()"onmouseover="ShowPage('fra me3')"onclick="ShowPage('frame3')" rel="nofollow" rel="nofollow" target="mainbox"></a></div>
And then the mouseovers.js file looks like this (this is just a script i found online and edited so my guess is that the issue is here): Code: function ShowPage(frame1)
//Display in the i-frame, the page whose name is aName
{
{
frames[0].location = frame1+'.html'
}
function ShowPage(frame2)
//Display in the i-frame, the page whose name is aName
{
frames[0].location = frame2+'.html'
}
function ShowPage(frame3)
//Display in the i-frame, the page whose name is aName
{
frames[0].location = frame3+'.html'
}
}
Like i said, works on ffox, safari, ie7, chrome.. so im sort of at a loss. Ideas? Ok, I'm working in dreamweaver cs4 I'm trying to make my links have a sound on mouseover. The tag for this is under the depreciated behaviour section. I tried it to test it. It added the following code to my link: Code: To View Full Product Line<br />
<a href="http://herbal-nutrition.net/yesifeelgood/products" target="_blank" onmouseover="MM_controlSound('play','document.test','sounds/Sound 378.mp3')">Click Here</a>
<embed name="test" src="sounds/Sound 378.mp3" loop="false" autostart="false" hidden="true" width="0" height="0" enablejavascript="true"></embed>
My only problem is that when this loads in a browser on mouseover it loads the window as a quicktime sound then directs to the link preview on the following link (the link where I added the sound is underneath the slideshow: http://www.designfoxmediaworks.com/c...e/carlene.html is there something i should be changing to make this work properly? Hi, I have a series of images, anchored linked together to simulate a tour. I decided it would be better if rather than clicking it was like a smooth simulation so i added onmousever to the anchor links. this was a smooth transistion but entirely too fast. is there a way with javascript, to slow down the onmouseover events? i have the images on the same page, just shoved down the page by using pagebreak html, so that they load when the page loads and therefore don't slow down the effect. (they are large images). i can't use the script that smoothly scrolls between anchor links, because it scrolls down the page to the next image, which ruins the effect. the images are increasingly larger pictures of the same thing, so the effect is somewhat like moving thru 3d space. i need the onmouseover to FIRE but move slower than normal onmouseover before firing again. repeat. here's an example http://www.thelivingmoon.com/undomie...rmouse.html#22 i mean the entire sequence is done before the person even realizes what just happened Hi, I can't figure out what's wrong with my code here, but my mouseovers aren't working. Here's the page: http://www.basentana.com/pastproductions2.html I appreciate any help at all. I'm using Adobe GoLive 5... Mouseover buttons on the navigation bar don't function properly on the web, but they do in GoLive. I believe it's a Javascript coding issue, but I can't figure out exactly what (I'm no programmer). The site I'm working on is www.txbrandland.com - can anyone show me what's wrong or missing in the following code? I appreciate any help I can get. Code: <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <meta name="generator" content="Adobe GoLive 5"> <title>Welcome to Texas Brand Land Co.</title> <csscriptdict import> <script src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/GeneratedItems/CSScriptLib.js"></script> </csscriptdict> <csactiondict> <script><!-- CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Main Page',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/home-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/home-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/home-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Acreage With House',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/awh-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/awh-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/awh-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Acreage Only',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/a-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/a-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/a-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Homes Only',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/h-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/h-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/h-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Commercial Property',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/comm-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/comm-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/comm-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'About Us',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/about-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/about-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/about-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Meet Our Team',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/agents-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/agents-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/agents-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Community Information',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/links-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/links-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/links-in.jpg',''); CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'Contact Information',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/contact-out.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/contact-in.jpg',/*URL*/'file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/contact-in.jpg',''); // --></script> </csactiondict> </head> <body onload="CSScriptInit();"> <div align="left"> <br> <table border="0" cellpadding="0" cellspacing="10" align="left" width="164" height="355"> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/home-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/home-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/index.html" onmouseover="return CSIShow(/*CMP*/'Main Page',1)" onmouseout="return CSIShow(/*CMP*/'Main Page',0)" onclick="CSIShow(/*CMP*/'Main Page',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/home-out.jpg" width="175" height="35" name="Main Page" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/awh-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/awh-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Acreage%20With%20House.html" onmouseover="return CSIShow(/*CMP*/'Acreage With House',1)" onmouseout="return CSIShow(/*CMP*/'Acreage With House',0)" onclick="CSIShow(/*CMP*/'Acreage With House',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/awh-out.jpg" width="175" height="35" name="Acreage With House" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/a-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/a-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Acreage.html" onmouseover="return CSIShow(/*CMP*/'Acreage Only',1)" onmouseout="return CSIShow(/*CMP*/'Acreage Only',0)" onclick="CSIShow(/*CMP*/'Acreage Only',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/a-out.jpg" width="175" height="35" name="Acreage Only" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/h-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/h-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Homes.html" onmouseover="return CSIShow(/*CMP*/'Homes Only',1)" onmouseout="return CSIShow(/*CMP*/'Homes Only',0)" onclick="CSIShow(/*CMP*/'Homes Only',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/h-out.jpg" width="175" height="35" name="Homes Only" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/comm-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/comm-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Commercial.html" onmouseover="return CSIShow(/*CMP*/'Commercial Property',1)" onmouseout="return CSIShow(/*CMP*/'Commercial Property',0)" onclick="CSIShow(/*CMP*/'Commercial Property',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/comm-out.jpg" width="175" height="35" name="Commercial Property" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/about-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/about-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/About%20Us.html" onmouseover="return CSIShow(/*CMP*/'About Us',1)" onmouseout="return CSIShow(/*CMP*/'About Us',0)" onclick="CSIShow(/*CMP*/'About Us',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/about-out.jpg" width="175" height="35" name="About Us" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/agents-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/agents-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Meet%20Our%20Team.html" onmouseover="return CSIShow(/*CMP*/'Meet Our Team',1)" onmouseout="return CSIShow(/*CMP*/'Meet Our Team',0)" onclick="CSIShow(/*CMP*/'Meet Our Team',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/agents-out.jpg" width="175" height="35" name="Meet Our Team" border="0"></a></csobj></div> </td> </tr> <tr> <td> <div align="center"> <csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/links-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/links-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Community.html" onmouseover="return CSIShow(/*CMP*/'Community Information',1)" onmouseout="return CSIShow(/*CMP*/'Community Information',0)" onclick="CSIShow(/*CMP*/'Community Information',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/links-out.jpg" width="175" height="35" name="Community Information" border="0"></a></csobj></div> </td> </tr> <tr> <td><csobj w="175" h="35" t="Button" ht="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/contact-in.jpg" cl="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/contact-in.jpg"><a href="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/Contact%20Us.html" onmouseover="return CSIShow(/*CMP*/'Contact Information',1)" onmouseout="return CSIShow(/*CMP*/'Contact Information',0)" onclick="CSIShow(/*CMP*/'Contact Information',2);return CSButtonReturn()"><img src="file:///E:/Website%20Construction/+TXBRANDLAND%20WEBSITE/TXBRANDLAND/public_html/TXBLC%20Site%20Contents/Images/Buttons/contact-out.jpg" width="175" height="35" name="Contact Information" border="0"></a></csobj></td> </tr> </table> </div> </body> </html> Greetings fellow coders, I am having an issue with my rollover images. The first image (when hovered over) is fine, however when I hover over the second image the mouseover effect replaces the first jpg. Any idea how I can seperate the behaviours so my 2nd image mouseover glow is in it's correct place? Thanks in advance, Zeme Andrews Code: <!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>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" type="text/javascript">
if (document.images) {
var button1 = new Image();
var button2 = new Image();
var button3 = new Image();
var button4 = new Image();
var button5 = new Image();
var button6 = new Image();
button1.src= "images/thumb1.jpg" ;
button2.src= "images/thumb1_glow.jpg";
button3.src= "images/thumb2.jpg";
button4.src= "images/thumb2_glow.jpg";
button5.src= "images/thumb3.jpg";
button6.src= "images/thumb3_glow.jpg";
}
</script>
<script type="text/javascript" src="/nav/tb/jquery.js"></script>
<script type="text/javascript" src="/nav/tb/thickbox.js"></script>
</head>
<body>
<table width="530" border="5" cellspacing="0" cellpadding="0" align="left">
<tr><td align="justify">
<img src="images/thumb1.jpg" height="230" width="150" alt="" border="2" hspace="5" name="rollover" onmouseover="document.rollover.src=button2.src"
onmouseout="document.rollover.src=button1.src" />
<img src="images/thumb2.jpg" height="230" alt="" width="150" border="2" hspace="5" name="rollover_1" onmouseover="document.rollover.src=button4.src"
onmouseout="document.rollover.src=button3.src" />
<img src="images/thumb3.jpg" height="230" alt="" width="150" border="2" hspace="5" name="rollover_2" onmouseover="document.rollover.src=button6.src" onmouseout="document.rollover.src=button5.src" />
</td></tr>
</table>
</body>
</html>
Hi, After many hours spent trying to resolve this myself, I've finally accepted I'm not going to stumble across an answer. Would very much appreciate any guidance! Basically, I have a mouseover slideshow setup purely thanks to the Javascript Kit. It consists of three smaller images that feed into a larger one. I have also added code to change the accompanying text on rollover. The only problem I have, is that before the user hovers over one of the smaller images, the larger image doesn't link anywhere. Given that the 'a href' for the div is "javascript:warp()" is it still possible to have the larger image link to a url before any of the smaller images have been activated? Or will I need to recode completely to achieve this? If I haven't explained well enough, you can see the problem here - http://soundsenseonline.co.uk/ Many Thanks, JD Code:
<script>
/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("http://soundsenseonline.co.uk/featuredcontentimages/1.png","http://soundsenseonline.co.uk/featuredcontentimages/2.png","http://soundsenseonline.co.uk/featuredcontentimages/3.png")
</script>
</head>
<body>
<div class="featuredcontentall">
<div class="featuredcontent">
<a href="javascript:warp()"><img src="http://soundsenseonline.co.uk/featuredcontentimages/1.png" width="740" height="327" name="targetimage" border=0>
<div id="featuredcontenttext">Stateside Selection: The Material</div>
</div></a>
<div class="featuredcontentslides">
<a href="http://soundsenseonline.co.uk/2011/07/stateside-selection-the-material/" onMouseover="changeimage(myimages[0],this.href)
document.getElementById('featuredcontenttext').firstChild.data = 'Stateside Selection: The Material'; return true;"><img src="http://soundsenseonline.co.uk/featuredcontentimages/1s.png" width="238" /></a>
<a href="http://soundsenseonline.co.uk/2011/07/sarah-jarosz-live-the-greystones-sheffield-17072011/" onMouseover="changeimage(myimages[1],this.href)
document.getElementById('featuredcontenttext').firstChild.data = 'Live Review: Sarah Jarosz @ The Greystones, Sheffield 17/07/2011'; return true;"><img src="http://soundsenseonline.co.uk/featuredcontentimages/2s.png" width="238"/></a>
<a href="http://soundsenseonline.co.uk/2011/05/mc-lars-weerd-science/" onMouseover="changeimage(myimages[2],this.href)
document.getElementById('featuredcontenttext').firstChild.data = 'Exclusive: MC Lars & Weerd Science - Live Performance and Interview'; return true;"><img src="http://soundsenseonline.co.uk/featuredcontentimages/3s.png" width="238"/></a>
</div></div>
</body>
Hi I am trying to implement a hide/show div, such that when you mouse over a div, another div pop's up below it. Here's what I have so far, but for some reason, only the first div set is working. That is when I mouse over div 1, div 2 shows up. So why isnt it working for divs 3,4 and 5,6? Here's my code: Code:
HTML
<div >
<div id="showhide">
Line 1
</div>
<div id="visiblediv" style="display: none;">
Line 2
</div>
</div>
<div >
<div id="showhide">
Line 3
</div>
<div id="visiblediv" style="display: none;">
Line 4
</div>
</div>
<div >
<div id="showhide">
Line 5
</div>
<div id="visiblediv" style="display: none;">
Line 6
</div>
</div>
Javascript:
<script>
function mover(){
document.getElementById("visiblediv").style.display="block"
}
function mout() {
document.getElementById("visiblediv").style.display="none"
}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>
CSS:
#visiblediv {
visibility:visible;
border:1px dotted black;
}
Any ideas, as to why it's not working? hello, It is a insult to newbie to cal myself one, but I have a blog that I am trying to get a simple bit of code to work on. I have text rotator that I found and have made it work for my purposes, but I need it to pause when someone mouses over and restart when then mouse off. I have found code snipets online but I am not smart enough to figure out where they fit in....Help would be very appreciated the code it below.... Code: <div id="quotetext" >
text
</div>
<script type="text/javascript" >
var myquotes = new Array(
'quote 1',
'quote 2',
'qoute 3'
);
function rotatequote()
{
thequote = myquotes.shift(); //Pull the top one
myquotes.push(thequote); //And add it back to the end
document.getElementById('quotetext').innerHTML = thequote;
// This rotates the quote every 10 seconds.
// Replace 10000 with (the number of seconds you want) * 1000
t=setTimeout("rotatequote()",5000);
}
// Start the first rotation.
rotatequote();
</script>
Hello, I'm trying to change the background image with a mouseover function on the menu (Center Consoles, etc.). Here's my the page I'm working on (Boats | Striper Boats) When you hover on Center Consoles> 200CC, the background image should change. What am I doing wrong?? My Wordpress template uses this php code to call the background image: PHP Code: <?php /* #Start the Loop ======================================================*/ if (have_posts()) : while (have_posts()) : the_post(); ?> <?php /* #Get Fullscreen Background ======================================================*/ $pageimage = get_post_meta($post->ID,'_thumbnail_id',false); $pageimage = wp_get_attachment_image_src($pageimage[0], 'full', false); ag_fullscreen_bg($pageimage[0]); ?> and here is my code for the Javascript I set up to get the mouseover function and to set up the menu: PHP Code: <script language="JavaScript"> var backImage = new Array(); // don't change this // Note how backImage[3] = "" -- which would // set the page to *no* background image. backImage[0] = "http://takeitto11.com/striper2015/wp-content/uploads/2014/10/Striper_HPS_1500x150010.jpg"; backImage[1] = "22.jpg"; backImage[2] = "33.jpg"; backImage[3] = ""; // Do not edit below this line. //----------------------------- function changeBGImage(whichImage){ if (document.body){ document.body.background = backImage[whichImage]; } } </script> <div class="contentarea"> <div id='cssmenu'> <ul> <li class='has-sub'><a href='#'>Center Consoles</a> <ul> <li class='sub'><a class="rollover" href="http://takeitto11.com/striper2015/portfolio/2oo-cc/" onMouseOver="javascript:changeBGImage(0)">200 CC</a></li> <li class='sub'><a class="220CC" href='#'>220 CC</a></li> <li class='sub'><a class="2605CC" href='#'>2605 CC</a></li> </ul> </li> <li class='has-sub '><a href='#'>Dual Consoles</a> <ul> <li class='sub'><a class="200DC" href='#'>200 DC</a></li> <li class='sub'><a class="220DC" href='#'>220 DC</a></li> </ul> </li> <li class='has-sub '><a href='#'>Walk Arounds</a> <ul> <li class='sub'><a class="200WA" href='#'>200 Walk Around</a></li> <li class='sub'><a class="220WA" href='#'>220 Walk Around</a></li> <li class='sub'><a class="2601WA" href='#'>2601 Walk Around</a></li> <li class='sub'><a class="2901WA" href='#'>2901 Walk Around</a></li> </ul> </li> </div> <div class="clear"></div> </ul> For some reason it's not working. I've already tried jQuery and that ended up with some weird results, please help!! Is there a line of code I can add to my slideshow code to have the slideshow activated by mouseOver and show the main picture on mouseOut, or do I have to redo the code? I've been searching online for a while and can't find anything that works. Any help would be appreciated! Code: <script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/
var slideimages=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
//-->
</script>
<img src="https://lh3.googleusercontent.com/-_ZBn3vpI1aM/TeT4Ty9Dh8I/AAAAAAAABQ8/OWXNUQfXn5U/butterfly.png" name="slide" border=0 width=50 height=47>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("https://lh6.googleusercontent.com/-bPZjekuMNX8/TeT4TyZ2z7I/AAAAAAAABRA/swrVvRqHTpM/butterfly1.png","https://lh6.googleusercontent.com/-fM-kMmy3STQ/TeT4T_aq5hI/AAAAAAAABRE/oq4rGMy8-Qs/butterfly2.png","https://lh3.googleusercontent.com/-jR41bich1pw/TeT4UFyGefI/AAAAAAAABRI/2V8B6bx8P0o/butterfly5.png", "https://lh3.googleusercontent.com/-_ZBn3vpI1aM/TeT4Ty9Dh8I/AAAAAAAABQ8/OWXNUQfXn5U/butterfly.png")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=200
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
I am working with the quiz found below (Multiple Choice Quiz that is instantly graded/checked), and would like to add pictures to the questions and rollover sound effects. I have figured how to add the picture, but not the sound. Sound effects are played when added to the html section, but not when added to the javascript coding. I am alright with html and css, but not with javascript. Any help from the javascript experts would be appreciated. ********* Coding Example ********* <HTML> <HEAD> <TITLE>The JavaScript Source: Miscellaneous : Multiple Choice Quiz</TITLE> <META HTTP-EQUIV="The JavaScript Source" CONTENT = "no-cache"> <META NAME="description" CONTENT="Add a quiz to your Web page without using a server-side script. Easy to set-up. Questions and answers are stored in a multi-dimensional array format in an external file. The quiz is marked in real time, and once answered, questions are set to read-only. A summary of the users score is alerted at the end."> <META NAME="date" CONTENT="2005-12-27"> <META NAME="channel" CONTENT="Developer"> <META NAME="author" CONTENT="James Crooke"> <META NAME="section" CONTENT="Miscellaneous"> <style type="text/css"> <!-- .question { color:darkblue; font-size:14px; font-weight:bold; } --> </style> <script type="text/javascript"> <!-- /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: James Crooke :: http://www.cj-design.com */ var useranswers = new Array(); var answered = 0; function renderQuiz() { for(i=0;i<questions.length;i++) { document.writeln('<p class="question">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.gif" style="border:0" alt="" /></span></p>'); for(j=0;j<choices[i].length;j++) { document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label><br />'); } } document.writeln('<p><input type="submit" value="Show Score" onclick="showScore()" /> <input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /></p><p style="display:none"><img src="correct.gif" style="border:0" alt="Correct!" /><img src="incorrect.gif" style="border:0" alt="Incorrect!" /></p>'); } function resetQuiz(showConfirm) { if(showConfirm) if(!confirm("Are you sure you want to reset your answers and start from the beginning?")) return false; document.location = document.location; } function submitAnswer(questionId, obj, classId, labelId) { useranswers[questionId] = obj.value; document.getElementById(labelId).style.color = "grey"; //disableQuestion(classId); showResult(questionId); answered++; } function showResult(questionId) { if(answers[questionId] == useranswers[questionId]) { document.getElementById('result_' + questionId).innerHTML = '<img src="correct.gif" style="border:0" alt="Correct!" />'; // I tried to make the background a different colour for the answer document.getElementById(questionId).style.border ='1px'; } else { document.getElementById('result_' + questionId).innerHTML = '<img src="incorrect.gif" style="border:0" alt="Incorrect!" />'; } } function showScore() { if(answered != answers.length) { alert("You have not answered all of the questions yet!"); return false; } questionCount = answers.length; correct = 0; incorrect = 0; for(i=0;i<questionCount;i++) { if(useranswers[i] == answers[i]) correct++; else incorrect++; } pc = Math.round((correct / questionCount) * 100); alertMsg = "You scored " + correct + " out of " + questionCount + "\n\n"; alertMsg += "You correctly answered " + pc + "% of the questions! \n\n"; if(pc == 100) alertMsg += response[0]; else if(pc >= 90) alertMsg += response[1]; else if(pc >= 70) alertMsg += response[2]; else if(pc > 50) alertMsg += response[3]; else if(pc >= 40) alertMsg += response[4]; else if(pc >= 20) alertMsg += response[5]; else if(pc >= 10) alertMsg += response[6]; else alertMsg += response[7]; if(pc < 100) { if(confirm(alertMsg)) resetQuiz(false); else return false; } else { alert(alertMsg); } } function disableQuestion(classId) { var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++) { if (alltags[i].className == classId) { alltags[i].disabled = true; } } } var questions = new Array(); var choices = new Array(); var answers = new Array(); var response = new Array(); // To add more questions, just follow the format below. questions[0] = "1) JavaScript is ..." ; choices[0] = new Array(); choices[0][0] = "the same as Java"; choices[0][1] = "kind of like Java"; choices[0][2] = "different than Java"; choices[0][3] = "ther written part of Java"; answers[0] = choices[0][2]; ///////// THIS IS THE SECTION THAT I'M TRYING TO WORK ON ///////// // image works, but sound doesn't // questions[1] = "<a href='javascriptHTMLSound' id='dummyspan' // the smiley is actually a colon followed by a D as in "DHTML" onMouseOver='DHTMLSound('success.wav')'><img src='some_image.gif'></a>"; choices[1] = new Array(); choices[1][0] = "Play This" + "<a href='javascriptlaySound('success.wav')'>Play This</a>"; choices[1][1] = "objective"; choices[1][2] = "evil"; choices[1][3] = "object based"; answers[1] = choices[1][3]; ///////////////////////////////////////////////////////////////// questions[2] = "3) To comment out a line in JavaScript ..."; choices[2] = new Array(); choices[2][0] = "Precede it with two forward slashes, i.e. '//'"; choices[2][1] = "Precede it with an asterisk and a forward slash, i.e. '*/'"; choices[2][2] = "Precede it with an asterisk, i.e. '*'"; choices[2][3] = "Precede it with a forward slash and an asterisk, i.e. '/*'"; answers[2] = choices[2][0]; questions[3] = "4) JavaScript can only run on Windows"; choices[3] = new Array(); choices[3][0] = "True"; choices[3][1] = "False"; answers[3] = choices[3][1]; questions[4] = "5) Semicolons are optional at the end of a JavaScript statement."; choices[4] = new Array(); choices[4][0] = "True"; choices[4][1] = "False"; answers[4] = choices[4][0]; questions[5] = "strings are..."; choices[5] = new Array(); choices[5][0] = "strings, numbers, BooBoos, and nulls"; choices[5][1] = "strings, text, Booleans, and nulls"; choices[5][2] = "strings, numbers, Booleans, and nulls"; choices[5][3] = "strings, numbers, Booleans, and zeros"; answers[5] = choices[5][2]; // response for getting 100% response[0] = "Excellent, top marks!"; // response for getting 90% or more response[1] = "Excellent, try again to get 100%!" // response for getting 70% or more response[2] = "Well done, that is a good score, can you do better?"; // response for getting over 50% response[3] = "Nice one, you got more than half of the questions right, can you do better?"; // response for getting 40% or more response[4] = "You got some questions right, you can do better!"; // response for getting 20% or more response[5] = "You didn't do too well, why not try again!?"; // response for getting 10% or more response[6] = "That was pretty poor! Try again to improve!"; // response for getting 9% or less response[7] = "Oh dear, I think you need to go back to school (or try again)!"; //--> </script> </HEAD> <BODY BGCOLOR=#ffffff vlink=#0000ff > <script> function DHTMLSound(surl) { document.getElementById("dummyspan").innerHTML="<embed src='"+surl+"' hidden=true autostart=true loop=false>"; } </script> <script type="text/javascript"> <!-- renderQuiz(); //--> </script> </body></html> ********* I have also tried the following sound ideas, but none work "within" the javascript -- they do work when assigned to a button inside the html however... The trick is, I want to be able to display an image within the question, then mouseover a <span> of text or an image (preferrably NOT a link <a>) and have the sounds played as part of the choices for the question. For a slightly different purpose, I'm also interested in being able to have the correst answer (for more complicated quizes) appear beside the question, in a <div> if possible, rather than an alert, to give the solution / reasoning for the correct answer. Any help at all would be really appreciated. is there a way to make it so when the user clicked the start game button that the button would appear for a few seconds then disappear and when the start game button was clicked again another one would appear again? There will be buttons inside of the divs i just havnt programed them in yet Code: <!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>Random Sounds 2</title>
<style type="text/css">
.article_example_div { display:none; width:300px; height:300px;}
</style>
<script type="text/javascript" language="JavaScript"><!--
NumberOfDivsToRandomDisplay = 5;
var r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay);
//code to prevent same div from showing twice in a row.
var CookieName = 'DivRamdomValueCookie';
function DisplayRandomDiv() {
if(NumberOfDivsToRandomDisplay > 1) {
var ck = 0;
var cookiebegin = document.cookie.indexOf(CookieName + "=");
if(cookiebegin > -1) {
cookiebegin += 1 + CookieName.length;
cookieend = document.cookie.indexOf(";",cookiebegin);
if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
}
while(r == ck) { r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); }
document.cookie = CookieName + "=" + r;
}
//end of code to prevent same div from showing twice in a row.
for( var i=1; i<=NumberOfDivsToRandomDisplay; i++) {
document.getElementById("randomdiv"+i).style.display="none";
}
document.getElementById("randomdiv"+r).style.display="block";
}
</script>
</head>
<body>
<input type="button" value="Start game" onclick="DisplayRandomDiv()"></button>
<div id="randomdiv1" class="article_example_div">
Div 1
</div>
<div id="randomdiv2" class="article_example_div">
Div 2
</div>
<div id="randomdiv3" class="article_example_div">
Div 3
</div>
<div id="randomdiv4" class="article_example_div">
Div 4
</div>
<div id="randomdiv5" class="article_example_div">
Div 5
</div>
</body>
</html>
I found a simple script from the net that redirects the user to another page after timeout. I want to redirect the user to an anchor (an anchor called #done) in the SAME page, but i couldn't do it. Here's the code. Any help will be appreciated. Thank you. Code: <form name="redirect">
<center>
<font face="Arial"><b>You will be redirected to the script in<br><br>
<form>
<input type="text" size="3" name="redirect2">
</form>
seconds</b></font>
</center>
<script>
<!--
/*
*/
//change below target URL to your own
var targetURL="http://myurl.com"
// tried #done/samepage.htm as also samepage.htm/#done
//change the second to start counting down from
var countdownfrom=6
var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
setTimeout("countredirect()",1000)
}
countredirect()
//-->
</script>
Hi all, I have some card/images and would like to have the first one displayed.Which i can do. Then when I mouse click on the card/image it goes to another image for say 2 secs, then with out clicking goes back to the orignal card. I have played with the syntax for ages and also looked on the net and cannot get it right. This is what I have so far. Code: <html> <head> <script> var back = new Image(); back.src = "back.gif";// preloads the image. var ace = new Image(); ace.src = "0.gif"; //Preload the Image var two = new Image(); two.src = "1.gif";// preloads the image. var three = new Image(); three.src = "2.gif";// preloads the image. var four = new Image(); four.src = "3.gif";// preloads the image. var five = new Image(); five.src = "4.gif";// preloads the image. </script> </head> <body> <img name="img0"> <img name="img1"> // what is this for? <script> document.images['img0'].src = back.src;//displays image /*How do I have one card diplayed then mouseclick on that one card and another card will display for 2 secs then the card will go back to original card. */ </script> </body> </html> Any ideas ? Thanks heaps Shayne I asked a question a while ago about this box that changes content but i didn't say i wanted it to start automatically. Code: <script type="text/javascript">
// The stuff the box will say
var content = [
"<a href='www.url.com'> link 1 </a>",
"<a href='www.url2.com'> link 2 </a>",
"insert html content"
];
var msgPtr = 0;
var stopAction = null;
function change() {
var newMsg = content[msgPtr];
document.getElementById('change').innerHTML = ''+msgPtr+'<p>'+newMsg;
msgPtr++; msgPtr = (msgPtr % content.length);
}
function startFunction() { change(); stopAction = setInterval(change, 5000); }
function stopFunction() { clearInterval(stopAction); }
</script>
</head>
<body>
<button onclick="startFunction()">Start</button>
<button
onclick="stopFunction()">Stop</button>
<div id="change"
style="border: 5px solid rgb(136, 136, 136); width: 200px; height: 100px; background-color: rgb(221, 221, 221); color: white;"></div>
</body>
Could someone make this so that it starts automatically when the page loads? Like with a time out? I have this code that when you click a button it will shuffle items in an array then you have 10 seconds to read it then the array items disappear. But I need to figure out how to make it so that you can do something like click another button that will allow you to click the twister drill button again and it will shuffle it heres the code any help would be appreciated Code: <script type="text/javascript">
function myFunction()
{
var myarray=["red","blue", "yellow", "orange"]
myarray.sort(function() {return 0.5 - Math.random()})
var x=document.getElementById("demo");
x.innerHTML=myarray;
}
</script>
<script type="text/javascript">
{
var t=setTimeout("alertMsg()",10000);
}
function alertMsg()
{
document.getElementById("demo").style.display="none";
}
</script>
<button onclick="myFunction()">Twister Drill</button>
<font size="5">
<p id="demo"></p>
</font>
|
|||||||