|
JavaScript - Please Help With Javascript Mouseover Function In Wordpress Template
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!! Similar TutorialsI recently asked here about flash software for creating a gallery for my photoblog, but I now relaise I want something that's probably far more straight forward (I hope). What I want is for the first image in a set to load when the user clicks a category link (say Landscapes, for instance). Somewhere alongside the image will be a list of numbers or titles which, when hovered over with the mouse cursor, will change the image to the next in the set. Here's an example of exactly what I want: http://www.toddhido.com/ Hover over 'photographs >> homes at night >> houses' to get to one of the galleries. Is this simple coding? If it's not too much trouble, a very basic step-by-step on how I might acheive this would be very much appreciated. I have a slideshow that allows the user to see the previous slide title and the next slide title along with the current slide and its content. I tested locally not in WP and the code worked fine. Once I placed my source within WP everything went south. I inspector the first line in the script seems to be what is having the issues - $(window).load(function(){ and I am unsure what to do next. The source was used from Edit fiddle - JSFiddle the page I am trying to get to work is located here - Sevices | Q&D CONSTRUCTION, INC.Q&D CONSTRUCTION, INC. I am open to any suggestions. Code: <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
<style type='text/css'>
.cycle-slide {
width: 100%;
text-align: center;
}
img {
max-width: 300px;
}
#next {
float: right;
}
#prev {
float: left;
}
.center {
text-align: center;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
var slideshow = $('.cycle-slideshow');
maxSlides = slideshow.data('cycle.opts').slideCount;
slideshow.on({
'cycle-update-view': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
UpdateTitles();
}
});
function UpdateTitles(){
var currentSlide = slideshow.data('cycle.opts').currSlide;
activeSlide = $(".cycle-slide-active");
activeTitle = activeSlide.data('title');
if(currentSlide == 0){
nextTitle = activeSlide.next().data('title');
prevTitle = $(".cycle-slide").eq(maxSlides).data('title');
}
else if(currentSlide == maxSlides-1){
prevTitle = activeSlide.prev().data('title');
nextTitle = $(".cycle-slide").eq(0).data('title');
}
else {
nextTitle = activeSlide.next().data('title');
prevTitle = activeSlide.prev().data('title');
}
$('h1').html(activeTitle);
$('#prev').html("Previous: "+prevTitle);
$('#next').html("Next: "+nextTitle);
}
UpdateTitles();
});//]]>
</script>
Hey, I need some help with a javascript code. The code works fine in a HTML editor but produces this error, "HTTP method GET is not supported by this URL" in WordPress. Problem: I can't get this URL: https://www.geonlineapply.com/servlet/MCSGenericApp to function probably in WordPress. Any suggestions would be highly appreciated! Here's the HTML code: <SCRIPT language=javascript>function callSubmit() { document.frmApplicationTermsCond.submit(); } </SCRIPT> <FORM name=frmApplicationTermsCond action=https://www.geonlineapply.com/servlet/MCSGenericApp method=post target="_blank"> <INPUT type=hidden value=N name=MCSCLIENTTEST> <INPUT type=hidden value=OR name=PRODUCTCODE> <INPUT type=hidden value=03 name=GROUPCODE> <INPUT type=hidden value=1290800802 name=MERCHANTNUMBER> <INPUT type=hidden value=http://www.hrirrigation.com name=HOMEURL> <INPUT type=hidden value=TC name=OPERATION> <INPUT type=hidden value=I name=ORIGINATIONCODE> <INPUT type=hidden value=N name=CALLBACKCODE> <INPUT type=hidden value=00 name=FRAMESIZE> <INPUT type=hidden name=DEALERIMG1> <INPUT type=hidden name=DEALERIMG2> <INPUT type=hidden name=DEALERIMG3> <INPUT type=hidden name=BOTTOMFRAME> <INPUT type=hidden name=STORELOCATOR> <INPUT type=hidden value=3E name=APPROVALTEMPLATE> <INPUT type=hidden value=#FFFFFF name=BGCOLOR> <INPUT type=hidden name=DECLINEURL></FORM> <TABLE width="32%" align="center"> <TBODY> <TR> <TD width="100%" colSpan=2> <P align=center><A href="javascript:callSubmit()"><SPAN style="FONT-SIZE: 18px; COLOR: #cc0000">Apply Now hello folks, I start modding on a new theme, that wordpress theme got a javasript that flash news. see the website : Code: http://www.casapost.biz the problem is if i want to put any post or page, in that section, so I have to do it manually, so i have to put the HTML code. My Question is how can I change that probleme, in instead of coping HTML code, just to get post automatically from a category, So any post from that category will be showen as the news flash right now. the javaScript for that file is : Code: <div id="Featured">
<script type="text/javascript">
var delay = 5000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(234,250,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)
var fcontent=new Array();
begintag='<div style="font: normal 11px Geneva, Arial, Helvetica, sans-serif; padding: 10px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>News 1</b><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquamit amet felis. Mauris eros semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit elit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros......<br><br>Quisque sed felis. Aliquamit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. ullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante ui, aliquet nec, congue non, accumsan sit amet, lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.";
fcontent[1]="<b>News 2</b><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquamit amet felis. Mauris eros semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maec at nisl. ullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris. Duis sed assa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquamit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. ullam lorem mi......";
fcontent[2]="<b>News 3</b><br><br> Flash Info</a>";
closetag='</div>';
var fwidth='672px'; //set scroller width
var fheight='176px'; //set scroller height
var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.
///No need to edit below this line/////////////////
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;
/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com
function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}
/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);
}
}
/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid #282828; background: #ffffff; width:'+fwidth+';height:'+fheight+'"></div>');
if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
</script>
</div>
Thank you, any help is welcome, i'm noob to this world 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, 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 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>
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? 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>
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> 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? 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, First of all I am not a javascript programmer. I am using Datalife Engine with a tpl file. I have javascript that shows a google map which works fine. I just added javascript to calculate the distance between two points lat1, lon1, lat2, lon2. No error there. Now the only problem I have now is how to I get the result in miles to display in the google map content label? I've tried many things and obviously wrong because the map will not display at all when I try to get the var dist to show. I want to display the distance here between Event: & miles. --> Distance to Event: miles Here is what I have so far. Code: var lat1 = ([xfvalue_koordx]);
var lon1 = ([xfvalue_koordy]);
var lat2 = (39.759709);
var lon2 = (-86.164644);
var unit = 'M';
function distance(lat1, lon1, lat2, lon2, unit) {
var radlat1 = Math.PI * lat1/180
var radlat2 = Math.PI * lat2/180
var radlon1 = Math.PI * lon1/180
var radlon2 = Math.PI * lon2/180
var theta = lon1-lon2
var radtheta = Math.PI * theta/180
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist)
dist = dist * 180/Math.PI
dist = dist * 60 * 1.1515
if (unit=="K") { dist = dist * 1.609344 }
if (unit=="N") { dist = dist * 0.8684 }
return dist
}
myInfoWindowOptions = {
content: '<div class="info-window-content"><h4>{title}</h4><p>[xfvalue_Address]</p><p>[xfvalue_City], [xfvalue_State] [xfvalue_Zip Code]</p><p>Distance to Event: miles</div>',
maxWidth: 200
};
infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map,marker);
});
google.maps.event.addListener(marker, 'dragstart', function(){
infoWindow.close();
});
infoWindow.open(map,marker2);
}
I’ve recently bought a Javascript/xml map of the USA. After payment a zip archive could be downloaded that includes a .html file, a .js file and a css stylesheet. Instructions on how to set it up in wordpress were not included though. Basically it comes down to this: every state of the US is clickable. In the .html file the settings can be configured for each state, such as whether the state is active (clickable) or not, and where it should link to. This part i understand and i know how to configure the .html file. The problem is that i can’t implement it on a wordpress page due to my limited programming skills. I tried uploading the .js file in my wp-content folder, and copying the code from index.html to a new page (note that i didn't use the WYSIWYG editor but the HTML option) but it seems like the Javascript file doesn't load. Any help would be greatly appreciated Screenshot of how the map looks like when i open the .html file in my browser (the map is working, i just can't get it to work in Wordpress) Screenshot of the files included in the zip file Thanks in advance 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 all, I am enrolled in a class that requires a bit of JS/HTML coding; my final project is to create a simple page representing myself. See example. And yes, that is my teacher. I am allowed to utilize "templates or tools". I am using my macbook, but I have access to school windows computers. Any suggestions on what to use to complete this assignment are greatly appreciated. I'm working on a new custom theme for my WordPress based site, and up until now I've been using the following PHP code to color code links based on whether the post was in the "Wii" category, "Xbox" category, or "PlayStation" category: PHP Code: <li> <?php if (in_category(3) ) { ?> <a style="color:#990000;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? }elseif (in_category(4) ) { ?> <a style="color:#669900;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? }elseif (in_category(7) ) { ?> <a style="color:#0099cc;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? } else { ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? } ?> </li> Thing is, I've now installed a plugin called "Recently Popular" that logs all visits and can output which posts were viewed the most in the past X days/weeks/months/etc. and the author has it set up to only allow HTML formatting via this line: PHP Code: <?php get_recently_popular(1, 'WEEK', 5, 0, 0, '<a href="%post_url%" rel="bookmark" title="%post_title%">%post_title%</a>'); ?> I've tried sticking PHP in the line, but it only takes HTML. I've tried sticking one of these lines in each of the conditional statements above, but realized that this line outputs the entire "Recently Popular" list, not just one item - so everything would end up being the same color still. I contacted the plugin author, who said that without hardcoding there's no way to get around this via the plugin, but that outputting it normally and running it through JavaScript might give me a way to apply CSS styling to it after it's been rendered. I'm not experienced with JavaScript, unfortunately... does anyone know how I can do this? 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. |
|||||||