|
JavaScript - Mouseover Activate Javascript Picture Slideshow
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>
Similar TutorialsHi, 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>
I have been working on a picture slideshow w/ a caption, and (due to being an extreme amateur) I cannot get it to work just right. I have the slideshow going, but I can't get the caption to stay on the right side of the photo, while keeping the layout fluid. I would also love to add a pause, forward, and back button, and I have tried several free slideshow generators but either they don't work or they don't produce what I'm after. Here is my code so far. Javascript: Code: <script type="text/javascript">
// Modified for: http://codingforums.com/showthread.php?p=949514#post949514
// and: http://www.codingforums.com/showthread.php?t=195033
var ImgPtr = -1; // -1 for first pass only
var BaseDirectory = 'http://s200.photobucket.com/albums/aa216/Jilldear/';
ImgArray = [ // format: ['imageName','Comments about image']
['pinto-1.jpg',
'<a href="paintorpinto.html" class="duh">Paint or Pinto?</a><br /><br /><class="duh">A free report from The Horse Resource answering the common questions about Pintos and Paints.<i>Written by Cassidy Deardorff for The Horse Resource.</i></div>'],
['shedding.jpg',
'<a class="duh" href="sheddingout.html">Shedding Out Tips</a><br /><br /><class="duh">Six tips to help get the winter hair off your horse faster. <i>Written by Cassidy Deardorff.</i>'],
['dewormer-1.jpg',
'<a class="duh" href="sampledchart.html">Sample Deworming Chart</a><br /><br /><class="duh">Use this sample deworming chart to make sure your horses are getting treated for internal parasites properly. <i>Written by Cassidy Deardorff.</i>']
// Note: No comma after last entry
];
var intervalAction;
function ShowSlide(slide_num) {
document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0];
document.getElementById('mypic').alt = ImgArray[slide_num][1];
document.getElementById('Caption').innerHTML = ImgArray[slide_num][1];
}
function slideshow() {
ImgPtr++;
ImgPtr = ImgPtr % ImgArray.length;
// document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr;
ShowSlide(ImgPtr);
}
onload = function() {
slideshow();
intervalAction = setInterval("slideshow()",5000);
}
</script>
HTML: Code: <div style="height:300px;width:398px;"> <div id="divCaption"> <div style="position:absolute; z-index:30; left:-999;" id="Caption"> </div> <img src="" alt="" border="1" id="mypic" name="mypic" alt="" height="300" width="398"> </div><br /> </div> I would LOVE for the finished slideshow to look somewhat like the one on this website: http://www.equisearch.com/ but I know this is a lot to ask Thanks so much in advance!!! Watch the answer to this problem be simple... but when I tried searching for similar problems, I can't find anything that helps. On a website of mine, I have a picture that acts as the navigation. When the user hovers over it, it changes pictures to show one section lighting up and the text to show where that one links to under it. Later, I changed it to show, when the mouse isn't hovering over the picture, the pictures automatically scrolling on a timer to show all the options. While this works most of the time, I recently discovered the reason behind a 'glitch' my friend noticed... but I'm unsure of how to fix it. The problem is, when the mouse is already on the picture as the page loads, it starts the timer even though the mouse is there. This causes it to keep trying to switch the picture on its own even when hovering over the picture. And when the mouse is off the picture, it changes it twice at an odd interval. In other words, it's starting the timer up twice and only cuts one of them off when you hover over the image. Here's a link to the site so you can see for yourself: http://nebula-andra.com/ (And if links aren't allowed, just let me know and I'll remove it--it's simply easier to see) Here's the code I have for the image timer... In the header, in a Javascript tag: Code: var currPic = 0;
var totPics = 12;
var keepTime;
var picName;
function setupPicChange(){
keepTime=setTimeout("changePic()", 2000);
}
function changePic(){
currPic++;
if(currPic > totPics) currPic = 1;
document.getElementById("logos").src="../images/logo/NA Logo - " + currPic + ".png";
setupPicChange();
}
function stopTimer(){
clearTimeout(keepTime);
}
function startTimer(){
keepTime=setTimeout("changePic()", 2000);
}
In the body: Code: <body onload="setupPicChange();"> <div id="logo_setup"> <p align="center" onmouseover="stopTimer();" onmouseout="startTimer();"><img src="../images/logo/NA_Logo.png" id="logos" name="logos" border=0 usemap="#logo"> I want the timer to start without the user having to do anything and complete stop when the user hovers over the picture. If there's anything else you need to see to help with this problem, please let me know. And thank you for taking the time to read this; I look forward to any suggestions you can give me. Note: This is being tested in Chrome, but the problem has appeared in both Firefox and IE as well. Hi All, I am very new at this and do not have any script editing skills. I have been building my website with webeasy 8 and downloaded one of the free scripts from JavaScriptKit website and I edited the parts that i think it were suppose to be edited. However, my problem is that the script is not working and i don't know where to begin ..... When i preview the site it shows broken link icon where the picture suppose to load. The pictures URL is correct, thus my dilemma! I don't know what else to do.... Copy of script bellow <script type="text/javascript"> // Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com) // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ // This notice must stay intact for use var ultimateshow=new Array() //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"] ultimateshow[0]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_01.jpg'] ultimateshow[1]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_02.jpg'] ultimateshow[2]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_03.jpg'] ultimateshow[3]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_04.jpg'] ultimateshow[4]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_05.jpg'] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth="540px" //set to width of LARGEST image in your slideshow var slideheight="412px" //set to height of LARGEST iamge in your slideshow var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous") var randomorder="no" //randomize the order in which images are displayed? "yes" or "no" var preloadimages="yes" //preload images? "yes" or "no" var slidebgcolor='white' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById var curcycle=0 if (preloadimages=="yes"){ for (i=0;i<ultimateshow.length;i++){ var cacheimage=new Image() cacheimage.src=ultimateshow[i][0] } } var currentslide=0 function randomize(targetarray){ ultimateshowCopy=new Array() var the_one var z=0 while (z<targetarray.length){ the_one=Math.floor(Math.random()*targetarray.length) if (targetarray[the_one]!="_selected!"){ ultimateshowCopy[z]=targetarray[the_one] targetarray[the_one]="_selected!" z++ } } } if (randomorder=="yes") randomize(ultimateshow) else ultimateshowCopy=ultimateshow function rotateimages(){ curcycle=(currentslide==0)? curcycle+1 : curcycle ultcontainer='<center>' if (ultimateshowCopy[currentslide][1]!="") ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" rel="nofollow" target="'+ultimateshowCopy[currentslide][2]+'">' ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">' if (ultimateshowCopy[currentslide][1]!="") ultcontainer+='</a>' ultcontainer+='</center>' if (ie||dom) crossrotateobj.innerHTML=ultcontainer if (currentslide==ultimateshow.length-1) currentslide=0 else currentslide++ if (curcycle==parseInt(slidecycles) && currentslide==0) return setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom rotateimages() } if (ie||dom) window.onload=start_slider </script> Hello! A client of mine wanted a picture slideshow like this website. http://themeforest.net/item/dark-atl..._preview/50415 I have looked through many different slideshows and carousel and have had no luck trying to find just a nice simple one like this. Can anyone help? I did find this: http://sorgalla.com/jcarousel/ but it deals with JQuery and I'm not sure how to use it. If it's simple and I can change that script to the one above then that's great. Any feedback is greatly appreciated Kristen http://www.twitter.com/kris10ized I have a website that has some javascript on it. I need to change one of the js files so that it doesn't reload the main "slideshow" (HTML5) files every time there is a click to a new page. here is the code that is causing... [CODE] $(document).ready(function() { //When page loads... $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); [CODE] I can't get rid of any of the lines or else it messes with my code, but when it "activates" the first tab is where I want that "first tab" to stay on what the user had clicked before, I don't want reactivation basically....please help! JavaScript Code: window.addEvent('domready',function(){
//SAMPLE 8
var handles8_more = $$('#handles8_more span');
var nS8 = new noobSlide({
box: $('box8'),
interval: 5000,
autoPlay: true,
items: $$('#box8 h3'),
size: 900,
handles: $$('#handles8 span'),
handle_event: 'mouseenter',
addButtons: {
previous: $('prev8'),
play: $('play8'),
stop: $('stop8'),
playback: $('playback8'),
next: $('next8')
},
onWalk: function(currentItem,currentHandle){
//style for handles
$$(this.handles,handles8_more).removeClass('active');
$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
//text for "previous" and "next" default buttons
$('prev8').set('html','<< '+this.items[this.previousIndex].innerHTML);
$('next8').set('html',this.items[this.nextIndex].innerHTML+' >>');
}
});
//walk to item 0 witouth fx
nS8.walk(0,false,true);
});
html Code: <div class="slider sample8"> <p class="buttons" id="handles8"> <span>Item 1</span><span>Item 2</span><span>Item 3</span><span>Item 4</span><span>Item 5</span> </p> <div class="mask1"> <div id="box8"> <div onMouseOver="nS8.Stop();" onMouseOut="nS8.Play();"> </div> </div> </div> <p class="buttons"> <span id="prev8"><< Previous</span> | <span id="next8">Next >></span> </p> <p class="buttons"> <span id="playback8">< Playback</span> <span id="stop8">Stop</span> <span id="play8">Play ></span> </p> </div> All I need to do is when they hover ocer the div statement stop the program from looping. and then when they stop hovering over it let it start looping again. Hi Guys I am trying to modify the functionality of my page. I want to be able to activate this piece of code using another javascript function. This is the code I want to activate: Code: <script type="text/javascript"><!--
$('#button-cart').bind('click', function() {
$.ajax({
url: 'index.php?route=checkout/cart/update',
type: 'post',
data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea, .date_data input[type=\'text\']'),
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, information, .error').remove();
if (json['error']) {
if (json['error']['warning']) {
$('#notification').html('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.warning').fadeIn('slow');
}
for (i in json['error']) {
$('#option-' + i).after('<span class="error">' + json['error'][i] + '</span>');
}
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart_total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
});
//--></script>
And this is how I want the format of the function to be: function testsession() { if there is a session called 'hiredate' { activate the script above } else { var el = document.getElementById("product_data"); } } I just dont know how to write this in javascript Could you help me if possible please Hello! My first (but surely not last) post on this forum. I made a drop box menu and I want to activate specific javascript functions when they are selected. I think this should be fairly easy to solve. I am very new at HTML and Javascript btw. This is what I tried: if (document.getElementById("selectense").value="present"){ document.getElementById("present").style.visibility="visible"; } <span class="tensebox"> <select id="selectense"> <option onclick="showPresent()">Present</option> <option onclick="showPC()">Present</option> </select></span> (and I have some text with the ID "present) how can I write on a picture with javascript? For part of my program I need a function that will switch two images, so when image 1 is clicked on, the function saves image 1, then image 2 is clicked on, and the spot where image 2 is receives the first image, while the place where image 2 was becomes the first image, a simple swapping function. yet, I'm having trouble writing it; this is what I have: <script> click=1 function swap(What input do I need? the img src?){ if (click==1){ var1=imgsrc click=2 } else{ var2=imgsrc //then switch them so: x=var1 var1=var2 var2=x click=1 } } </script> I made a mouseover event of a caption on a picture, when I hover the opacity of the background color of the hover and the text goes down. What I want is that when I hover over the image which the caption is floating on, the onmouseover event gets activite. For an imaginary example: Code: function unhighlight(x) {
x.style.backgroundColor="transparent"
}
Function ActivationFuction()
{
activate.function="unhighlight"
}
thanks Hi everyone, I'd really appreciate some help, I'm trying to make the menu of my website randomly change. I have 6 different image folders in which there are 7 pictures which all read the same things (menu, drawings, photo's etc) but in different writing. I want the website to (when refreshed, or when somebody clicks on one of the menu buttons) randomly pick a folder each time, and use the images of that folder. So the images are all the same name, just the folder needs changing. This is what I have so far (thanks to another forum aswell), which doesn't work. I'm very new to javascript... I can't really 'read' what is says, unlike html and/or css. I 'get' html and css. This really frustrates me. Help?!?! btw: I took everything out that doesn't concern this problem, for easier reading. Code: <html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="css/desktop.css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript">
function randomSort(a,b) {
return( parseInt( Math.random()*6 ) %2 );
}
var baseURL = 'http://www.SITE.nl/';
var mijnmenu = ['images/pl2/menubalpen','images/pl2/menugeo','images/pl2/menuinkt','images/pl2/menukleur','images/pl2/menupotlood','images/pl2/menusephia'];
function randomizeMenu() {
var rndMenu = mijnmenu.sort(randomSort);
var menuObj= document.getElementById('menu').getElementsByTagName('img');
for (var i=0; i<menuObj.length; i++) {
menuObj[i].src = baseURL+'/'+rndMenu[i]+'img';
}
}
</script>
</head>
<body onload="randomizeMenu()">
<div id="wrapper">
<div id="menu">
<a href="index.html"><img src="menu1.jpg" /></a>
<a href="drawings.html"><img src="menu2.jpg" /></a>
<a href="typo.html"><img src="menu3.jpg" /></a>
<a href="photo.html"><img src="menu4.jpg" /></a>
<a href="movies.html"><img src="menu5.jpg" /></a>
<a href="other.html"><img src="menu6.jpg" /></a>
<a href="contact.html"><img src="menu7.jpg" /></a>
</div>
<div id="largecolumn">
TEXT
</div>
</div>
</body>
</html>
I'm new to coding and recently undertook the position as my school district's webmaster. We use a six day schedule where the days are labeled A-F. I want to be able to display the Today is...A graphic based on the date. I tried some scripts from other forums, but it does not appear to be working. Any suggestions? TY <code> <script language="javascript"> <!-- var picture=''; mytime=new Date(); mymonth=mytime.getMonth()+1; mydate=mytime.getDate(); if (mymonth==9 && mydate==13){picture="<img src=/images/d.gif>"; } if (mymonth==9 && mydate==14){picture="<img src=/images/e.gif width=150 height=150 alt=E>"; } if (mymonth==9 && mydate==15){picture="<img src=/images/f.gif width=150 height=150 alt=F>"; } if (mymonth==9 && mydate==16){picture="<img src=/images/A.gif width=150 height=150 alt=A>"; } if (mymonth==9 && mydate==19){picture="<img src=/images/B.gif width=150 height=150 alt=B>"; } if (mymonth==9 && mydate==20){picture="<img src=/images/c.gif width=150 height=150 alt=C>"; } //--> </script></code> 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? Hi, I don't really know much about Javascript but I was wondering if anyone could tell me how to change this script so when you click on a link it doesn't open in a new window? Any help would be much appreciated! Code: <script language="JavaScript1.1">
<!--
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script><br>
<a href="javascript:gotoshow()"><img src="/images/brochure/2010/homepage_freestyle/Feb/Banner-Paris-special-129.jpg" name="slide" border=0 width=429 height=90></a>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("/images/brochure/2010/homepage_freestyle/Feb/Banner-Paris-special-129.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-3-for-1.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-London-89.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-Brussels-special-155.jpg")
slideshowlinks("/dl/holidayoffers.jsp?destination=DISCOVER_PARIS_BREAKS,RE,TO","/dl/holidayoffers.jsp?destination=MAILER_EUROSTAR_3_FOR_1,RE,TO,","/dl/holidayoffers.jsp?destination=london_rail_breaks,RE,TO,","/dl/holidayoffers.jsp?destination=DISCOVER_BRUSSELS,RE,TO,")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=3000
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++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
<p>
|
|||||||