|
JavaScript - Javascript Mouseover Anchor
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 Similar TutorialsSorry I am new to JavaScript. Says that a.html has two same anchor links (<a href="b.html">b</a>). The anchor links are uneditable but we could add JavaScript to the a.html. Except for dynamic adding onclick event, any other ways could get to know which anchor link being clicked? Im using an anchor tag with a class specified. When i click the anchor tag which i have displayed using C# it opens as a popup with background disabled. But when i clikc the anchor tag which i displayed using javascript it redirects to the url mentioned and does not open as a popup. C# Code ----------------- Code:
builder.Append("<a href='EditLevelValues.aspx?levelId=" + levelId + "&levelValueId=" + levelValueId + "&levelName=" + levelName + "&levelValueName=" + levelValueName + "&levelValueDescription="+levelValueDescription+"&placeValuesBeforeTB_=savedValues&TB_iframe=true&height=300&width=500&modal=true&' class='thickbox obox'>");
trLevels.InnerHtml = builder.ToString();
JAVASCRIPT CODE ------------------------- Code: strLevelValues += "<a href='EditLevelValues.aspx?levelValueName=" + lvlValueName + "&levelId="+lvlId+"&levelValueId=" + lvlValueId + "&levelValueDescription="+lvlValueDescription+"&levelName=Projects&placeValuesBeforeTB_=savedValues&TB_iframe=true&height=300&width=500&modal=true&' class='thickbox obox'>"; trProjLevel[0].innerHTML = strLevelValues; Hi guys, Having a little bit of trouble with a site I'm currently working on... I'm using some AJAX for the instant g-mail/facebook style navigation, you know the kind, with no refreshes, etc. Problem is, to allow for back/forward and bookmarks, I currently use a URL that looks like: http://www.mySiteOfFun.com/index.html#page=news.html; This is fine, not a problem... The issue comes into play when I want to open up the news.html page, from my home.html page, and have it open to news item #6 (for example). I can't add a #, because one is already being used to reference the anchor for the content div. Has anyone run into a similar problem before? If so, how did you resolve it? Can some jQuery be used to find the location of the news item div in question, on load, and scroll to it like that? Just not sure how to progress really, and any help would be greatly appreciated! 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? 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>
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? 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. 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? 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>
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>
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>
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!! 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. Hello , here is my code(which is not working on my problem) i want to remove anchor tag(href="a") will u please help.... Code: <html>
<head><title>Welcome to DevForum</title></head>
<script language="javascript" type="text/javascript">
function Remove()
{
var anchor = document.getElementsByTagName("a");
var i;
for(i=0;i<anchor.length;i++)
{
var anc=anchor.item(i);
var href=anc.attributes.getNamedItem("href");
if (href.value == "a")
{
anchor.item(i).attributes.getNamedItem("href").value = "";
}
}
}
</script>
<body onload="Remove()">
<h1>Welcome</h1>
<a href="b">b</a>
<a href="a">a</a>
</body>
</html>
Thanks in Advance.... greetings everyone! this is my first time trying to join this javascript community. Well then, now I'm telling about my miss-understanding of this keywords of javascript here... here's the html Code: <fieldset > <legend>Attachment</legend>
<table id="attachment" style="height: 50px;" width="200" border="0">
<th width="19%">Title</th>
<th width="26%">File</th>
<th width="41%">Description</th>
<th width="6%">Upload</th>
<th width="6%">More File</th>
<tr>
<td><input name="title" type="text" value="- none -" size="33" maxlength="50"></td>
<td><input name="filepath" type="file" size="33"></td>
<td><input name="description" type="text" value="- none -" size="60" maxlength="200"></td>
<td><input name="upload" type="button" value=" Upload " onclick="upload(this)"> </td>
<td><div align="center">
<input onclick="addMoreFile()" type="button" value="+">
</div></td>
</tr>
</table>
<!-- end Attachment --> </fieldset>
the aim is that the upload button would eventually changed into image and then changed back to a link. That one is already done here's the javascript Code: var attRow;
function upload(obj){
// obtain the table pointer
var attTable = document.getElementById('attachment');
// post file into the jsp file
// changing the image
// get parent pointer of this element
var par = obj.parentNode;
var loImage = document.createElement('img');
loImage.setAttribute('src', 'images/loading1.gif');
par.innerHTML = '';
par.appendChild(loImage);
// create the removal link
var text = document.createTextNode('remove');
var liRem = document.createElement('a');
liRem.setAttribute('href','javascript:removeFile(this)');
liRem.appendChild(text);
par.innerHTML = '';
par.appendChild(liRem);
}
function removeFile(obj){
// post fileid
// change the image
}
function addMoreFile(){
// create fully file upload row
// consist of two text elements, file element, and 1 button.
var nFileTitle = document.createElement('input');
nFileTitle.setAttribute('name','title');
nFileTitle.setAttribute('type','text');
nFileTitle.setAttribute('size', '33');
nFileTitle.setAttribute('value','- none -');
nFileTitle.setAttribute('maxlength','50');
var nFilePath = document.createElement('input');
nFilePath.setAttribute('name', 'filepath');
nFilePath.setAttribute('type', 'file');
nFilePath.setAttribute('size', '33');
var nDesc = document.createElement('input');
nDesc.setAttribute('name', 'description');
nDesc.setAttribute('type', 'text');
nDesc.setAttribute('value','- none -');
nDesc.setAttribute('size', '60');
nDesc.setAttribute('maxlength', '200');
var nUpButton = document.createElement('input');
nUpButton.setAttribute('name', 'upload');
nUpButton.setAttribute('type', 'button');
nUpButton.setAttribute('value', ' Upload ');
nUpButton.setAttribute('onclick', 'upload(this)');
// empty element
var ksg = document.createTextNode(' ');
// obtain the table pointer
var attTable = document.getElementById('attachment');
attRow = attTable.rows.length;
alert(attRow);
var nextRow = attTable.insertRow(attRow);
var ceL = nextRow.insertCell(0);
ceL.appendChild(nFileTitle);
ceL = nextRow.insertCell(1);
ceL.appendChild(nFilePath);
ceL = nextRow.insertCell(2);
ceL.appendChild(nDesc);
ceL = nextRow.insertCell(3);
ceL.appendChild(nUpButton);
ceL = nextRow.insertCell(4);
ceL.appendChild(ksg);
}
the problem arise when I try to use the removeFile() function using this keywords. into these; Code: function removeFile(obj){
// post fileid
// change the image back
// get parent pointer of this element
var par = obj.parentNode;
var loImage = document.createElement('img');
loImage.setAttribute('src', 'images/loading1.gif');
}
I try to apply the same approach as the upload() function. But instead the this object which is pointing at the parent node seems unreliable. Is there any missing point i haven't observed? I define an anchor as a global variable, like this: Code: var globvar = {
anchor: document.createElement("A")
}
Later, on the fly, I give it the attributes, like this: Code: globvar.anchor.setAttribute("href","javascript:keyb_change()");
globvar.anchor.setAttribute("onclick","javascript:blur()");
globvar.anchor.setAttribute("id","switch");
...
globvar.paragraph.appendChild(globvar.anchor);
TWO questions: 1) In setting the attributes on the fly, how do I attach the anchor's text (the user clicks on) to the anchor? 2) Is there a way to include the attributes within the global variable's original definition, thereby sparing me from coding the attributes on the fly? Thanks for your time. This code: when you click a link it jumps to an anchor point on the page and scrolls there smoothly. I was wondering how I get the same effect if I want the link to jump to another page? A normal anchor point on another page would set the href to, for instance, 'index.html#contact' but it won't work in this case as the javascript isn't reading the '#'. Any ideas?? Code: <script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
</script>
</head>
<body>
<ul>
<li><a href="javascript:void(0)" onClick="goToByScroll('contact')">Go to anchor 1</a></li>
</ul>
Please could anyone offer any advice, in simple terms on how to add anchor points to a page in order to create a smooth scroll element such as this one: http://www.kryogenix.org/code/browser/smoothscroll/#top Any help would be much appreciated. |
|||||||