|
JavaScript - Newbie Javascript Problem - Onmouseover Slideshow With Multiple Image Locations
Hi,
Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow: http://www.javascriptkit.com/script/...ifferent.shtml to use on my site. Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script? If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations? Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2. Thanks in advance Script Below: Code: <script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</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(my images here)
</script>
For the Links:
<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>
For the Image:
<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>
Similar Tutorialshi, please ignore this thread..it is a duplicate of one already active. MODS please delete. apologies for my mistake. Hi, Im using the following javascript to cycle through 3 images on my website header. http://www.dynamicdrive.com/dynamici...nslideshow.htm However, I have put it in a div layer and it works fine, except in Internet explorer, if you load the page in a small window and then maximise, it moves out of position. Similarly if you open the page maximised, and then make the page smaller, it again moves out of position. My page layout is centered on the web page. is there anyone who could help me? hi im creating a simple slide show and i was wondering how to add multiple sets of image. heres my current code Code:
<html>
<head>
<script type="text/javascript">
var Images = new Array
('images/up.jpg','images/right.jpg','images/down.jpg','images/left.jpg');
//my second group of images...
//('images/bottemleft.jpg','images/topleft.jpg','images/centerstep.jpg','images/topleft.jpg','images/bottemright.jpg');
var thisPic = 0;
function initLinks() {
document.getElementById("nextLink").onclick = processNext;
document.getElementById("backlink").onclick = processBack;
document.getElementById("fplaylink").onclick = processfplay;
document.getElementById("bplaylink").onclick = processbplay;
document.getElementById("stoplink").onclick = processstop;
}
function processNext() {
thisPic++;
if (thisPic == Images.length) {
thisPic = 0;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processBack() {
thisPic--;
if (thisPic == -1 ) {
thisPic = (Images.length -1);
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
var stop = 0
function processfplay() {
if (stop == 1) {
thisPic++;
if (thisPic == Images.length) {
thisPic = 0;
}
setTimeout("processfplay()", 200);
}
else {
stop = 1 ;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processbplay() {
if (stop == 2) {
thisPic--;
if (thisPic == -1 ) {
thisPic = (Images.length -1);
}
setTimeout("processbplay()", 200);
}
else {
stop = 2;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processstop (){
(stop = 0)
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
</script>
</head>
<body onload=initLinks() >
<h2 align= center>Images used in the slideshow below</h2>
<table align= center>
<tr><td><img src= "images/left.jpg"></td><td><img src= "images/down.jpg"></td>
<td><img src= "images/up.jpg"></td><td><img src= "images/right.jpg"></td></tr>
</table>
<table align= center>
<td><img src= "images/bottemleft.jpg"></td><td><img src= "images/topleft.jpg"></td>
<td><img src= "images/centerstep.jpg"></td>
<td><img src= "images/topright.jpg"></td><td><img src= "images/bottemright.jpg"></td>
</table>
<div align="center">
<h2>The Slidshow</h2>
<img src="images/ddrlogo.jpg" id="myPicture" alt="Slideshow" />
<h2>
<a href="any_old.html" id="nextLink">Next >></a><br/>
<a href="any_old.html" id="backlink">Back <<</a><br/>
<a href="any_old.html" id="fplaylink">Forward Play <<</a><br/>
<a href="any_old.html" id="bplaylink">backward Play <<</a><br/>
<a href="any_old.html" id="stoplink">Stop <<</a><br/>
</h2>
</div>
</body>
</html>
thanx in advance this is my script Quote: <a href="javascript:void(0);" onmouseOver="hahaha()"> <img border="0" src="pink.gif" name="Mainpic" id="image"></a> and this is the function Quote: function hahaha() { document.getElementById('image').src="blue.gif"; } the problem is when i mouseover the image look like this why is that? help please! thanks Hi guys, I need some help. Im trying to make a navagation menu with images that need to be changed when someone hovers over the child category. So lets say I have a menu that looks like this: Code: <img src="notactiveimagemenu1.jpg" alt=""> <ul id="menu1"> <li>link</li> <li>link</li> <li>link</li> </ul> <img src="notactiveimagemenu2.jpg" alt=""> <ul id="menu2"> <li>link</li> <li>link</li> <li>link</li> </ul> Now what im trying to do is if someone hovers over the li items from menu1 to change the image src of menu1.jpg to active. I was hoping to do this with some javascript. Code: // i was thinking about something like this: // first put menu items in a array // then use document.getElementById(id).onmouseover = function() // and make some sort of check to see which src should be changed. Now I really have no clue how to do it. So if anyone knows a cool solution please let me know. I know I could add onmouseover events to each li item and changing the src of the category. But Im trying to find a better solution. And I think I should be able to use document.getElementById(id).onmouseover = function() for that. Anyway thanks for any tips. Please note I know I could use jquery to do all of this very easy but I consider this practice because I don't know that much javascript. I am trying to use the cut and paste OnMouseover Slideshow that is featured at the JavascriptKit.com. I'm getting a line error code which reads "Line:81 Error: Expected ';' I have tried everything I can think of to eliminate this error...seems I know just enough to be dangerous, not enough to debug. Can someone please help me? Or at least tell me if there's someplace specific in between the script tags or elsewhere that I need to look? Killing me in Kentucky, Pam http://www.javascriptkit.com/script/...2/3slide.shtml Hi i have the above image slideshow script running fine on a webpage can anybody tell me how i can get it to run a second time to show a second different slideshow on the same page? Ive tried editing variables but i cant work it out. would be much appreciated Ta Here is a javascript/html code that changes a text phrase to something else on mouseover but it doesn't return to its original state before the event happened. The code is below. Thank you for your help. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script></script>
<title>Javascript</title>
<style type="text/css">
div
{
font-family: Georgia
}
</style>
</head>
<body>
<script type="text/javascript">
function changetext()
{
var textchange2 = "~Home~" ;
var id = document.getElementById("A");
id.innerHTML=textchange2;
}
</script>
<div id="A" onmouseover="changetext();">Home</div>
</body>
</html>
Hello I have created awebpage here with an onmouseover slideshow, adapted from the Cut & paste Onmouseover Slideshow from Javascript kit This works in IE8 but not in Firefox or Chrome. I appreciate this may have been previously solved but I cannot find it in the threads. Hi there, I am currently creating my first ever website and I am attempting to put in some javascript but I am having trouble, would it be possible for someone to guide me. I am trying to implement a slideshow but at the moment all I am getting is the first picture only, here is the code... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Lyons Design and Print</title>
<style type="text/css" media="all">
body
{
background-image:url('background.jpg');
}
.header {
font-size: 24pt;
font-weight: bold;
padding: 20px;
border-bottom: 1px solid #000;
text-align:center;
}
#nav {
margin:0;
padding:0;
float:left;
width:100%;
border:1px solid #42432d
border-width:1px 0;
text-align: center;
}
#nav li {
display:inline-block;
padding:0;
margin:0;
}
* html #nav li { display: inline; }
*+html #nav li { display: inline; }
#nav a:link,
#nav a:visited {
color:#000;
background:#0033CC;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:#0033CC;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#home #nav-home a,
#large format printing #nav-large format printing a,
#scanning #nav-scanning a,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a,
#large format photo copying #nav-large format photo copying a,
#contacts #nav-contacts a,
#about us #nav-about us a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#large format printing #nav-large format printing a:hover,
#scanning #nav-scanning a:hover,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a:hover,
#large format photo copying #nav-large format photo copying a:hover,
#contacts #nav-contacts a:hover,
#about us #nav-about us a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
}
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="DesignPrinter.jpg"
var image2=new Image()
image2.src="print-design.jpg"
var image3=new Image()
image3.src="printingpress.jpg"
var image4=new Image()
image4.src="thermal.jpg"
//-->
</script>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</style>
</head>
<body>
<div class="header"><img src="logo.jpg"></div>
<ul id="nav">
<li id="nav-Home"><a href="Home.html">Home</a></li>
<li id="nav-Large Format Printing"><a href="Large Format Printing.html">Large Format Printing</a></li>
<li id="nav-Scanning"><a href="Scanning.html">Scanning</a></li>
<li id="nav-Thermal Inkjet Printing and Plotting"><a href="Thermal Inkjet Printing and Plotting.html">Thermal Inkjet Printing and Plotting</a></li>
<li id="nav-Large Format Photo Copying"><a href="Large Format Photo Copying.html">Large Format Photo Copying</a></li>
<li id="nav-Contacts"><a href="#">Contacts</a></li>
<li id="nav-About Us"><a href="#">About Us</a></li></ul>
<table border="0" cellpadding="0" cellspacing="0" height="300"><tr><td id="maincontent" valign="top">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. </p>
<p align="center"><img src="DesignPrinter.jpg" name="slide" width=300 height=300></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
<embed src="beatles.mid" width="144" height="60">
</body>
Dear all, Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Javascript source: http://dynamicdrive.com/dynamicindex5/main.js My testpage: http://bisc.cse.ucsc.edu/test.html The console throws the error 'Cannot set property 'innerHTML' of null' in main.js:126 I marked line 126 with '>>', it happens in function stm Code: <!--
/*
Pleas leave this notice.
DHTML tip message version 1.2 copyright Essam Gamal 2003 (http://migoicons.tripod.com, migoicons@hotmail.com)
All modifications are done in the style.js you should not modify this file. Created on : 06/03/2003
Script featured on and can be found at Dynamic Drive (http://www.dynamicdrive.com)
*/
var ua = navigator.userAgent
var ps = navigator.productSub
var dom = (document.getElementById)? 1:0
var ie4 = (document.all&&!dom)? 1:0
var ie5 = (document.all&&dom)? 1:0
var nn4 =(navigator.appName.toLowerCase() == "netscape" && parseInt(navigator.appVersion) == 4)
var nn6 = (dom&&!ie5)? 1:0
var sNav = (nn4||nn6||ie4||ie5)? 1:0
var cssFilters = ((ua.indexOf("MSIE 5.5")>=0||ua.indexOf("MSIE 6")>=0)&&ua.indexOf("Opera")<0)? 1:0
var Style=[],Text=[],Count=0,sbw=0,move=0,hs="",mx,my,scl,sct,ww,wh,obj,sl,st,ih,iw,vl,hl,sv,evlh,evlw,tbody
var HideTip = "eval(obj+sv+hl+';'+obj+sl+'=0;'+obj+st+'=-800')"
var doc_root = ((ie5&&ua.indexOf("Opera")<0||ie4)&&document.compatMode=="CSS1Compat")? "document.documentElement":"document.body"
var PX = (nn6)? "px" :""
if(sNav) {
window.onresize = ReloadTip
document.onmousemove = MoveTip
if(nn4) document.captureEvents(Event.MOUSEMOVE)
}
if(nn4||nn6) {
mx = "e.pageX"
my = "e.pageY"
scl = "window.pageXOffset"
sct = "window.pageYOffset"
if(nn4) {
obj = "document.TipLayer."
sl = "left"
st = "top"
ih = "clip.height"
iw = "clip.width"
vl = "'show'"
hl = "'hide'"
sv = "visibility="
}
else obj = "document.getElementById('TipLayer')."
}
if(ie4||ie5) {
obj = "TipLayer."
mx = "event.x"
my = "event.y"
scl = "eval(doc_root).scrollLeft"
sct = "eval(doc_root).scrollTop"
if(ie5) {
mx = mx+"+"+scl
my = my+"+"+sct
}
}
if(ie4||dom){
sl = "style.left"
st = "style.top"
ih = "offsetHeight"
iw = "offsetWidth"
vl = "'visible'"
hl = "'hidden'"
sv = "style.visibility="
}
if(ie4||ie5||ps>=20020823) {
ww = "eval(doc_root).clientWidth"
wh = "eval(doc_root).clientHeight"
}
else {
ww = "window.innerWidth"
wh = "window.innerHeight"
evlh = eval(wh)
evlw = eval(ww)
sbw=15
}
function applyCssFilter(){
if(cssFilters&&FiltersEnabled) {
var dx = " progid:DXImageTransform.Microsoft."
TipLayer.style.filter = "revealTrans()"+dx+"Fade(Overlap=1.00 enabled=0)"+dx+"Inset(enabled=0)"+dx+"Iris(irisstyle=PLUS,motion=in enabled=0)"+dx+"Iris(irisstyle=PLUS,motion=out enabled=0)"+dx+"Iris(irisstyle=DIAMOND,motion=in enabled=0)"+dx+"Iris(irisstyle=DIAMOND,motion=out enabled=0)"+dx+"Iris(irisstyle=CROSS,motion=in enabled=0)"+dx+"Iris(irisstyle=CROSS,motion=out enabled=0)"+dx+"Iris(irisstyle=STAR,motion=in enabled=0)"+dx+"Iris(irisstyle=STAR,motion=out enabled=0)"+dx+"RadialWipe(wipestyle=CLOCK enabled=0)"+dx+"RadialWipe(wipestyle=WEDGE enabled=0)"+dx+"RadialWipe(wipestyle=RADIAL enabled=0)"+dx+"Pixelate(MaxSquare=35,enabled=0)"+dx+"Slide(slidestyle=HIDE,Bands=25 enabled=0)"+dx+"Slide(slidestyle=PUSH,Bands=25 enabled=0)"+dx+"Slide(slidestyle=SWAP,Bands=25 enabled=0)"+dx+"Spiral(GridSizeX=16,GridSizeY=16 enabled=0)"+dx+"Stretch(stretchstyle=HIDE enabled=0)"+dx+"Stretch(stretchstyle=PUSH enabled=0)"+dx+"Stretch(stretchstyle=SPIN enabled=0)"+dx+"Wheel(spokes=16 enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=0,motion=forward enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=0,motion=reverse enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=1,motion=forward enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=1,motion=reverse enabled=0)"+dx+"Zigzag(GridSizeX=8,GridSizeY=8 enabled=0)"+dx+"Alpha(enabled=0)"+dx+"Dropshadow(OffX=3,OffY=3,Positive=true,enabled=0)"+dx+"Shadow(strength=3,direction=135,enabled=0)"
}
}
function stm(t,s) {
if(sNav) {
if(t.length<2||s.length<25) {
var ErrorNotice = "DHTML TIP MESSAGE VERSION 1.2 ERROR NOTICE.\n"
if(t.length<2&&s.length<25) alert(ErrorNotice+"It looks like you removed an entry or more from the Style Array and Text Array of this tip.\nTheir should be 25 entries in every Style Array even though empty and 2 in every Text Array. You defined only "+s.length+" entries in the Style Array and "+t.length+" entry in the Text Array. This tip won't be viewed to avoid errors")
else if(t.length<2) alert(ErrorNotice+"It looks like you removed an entry or more from the Text Array of this tip.\nTheir should be 2 entries in every Text Array. You defined only "+t.length+" entry. This tip won't be viewed to avoid errors.")
else if(s.length<25) alert(ErrorNotice+"It looks like you removed an entry or more from the Style Array of this tip.\nTheir should be 25 entries in every Style Array even though empty. You defined only "+s.length+" entries. This tip won't be viewed to avoid errors.")
}
else {
var ab = "" ;var ap = ""
var titCol = (s[0])? "COLOR='"+s[0]+"'" : ""
var txtCol = (s[1])? "COLOR='"+s[1]+"'" : ""
var titBgCol = (s[2])? "BGCOLOR='"+s[2]+"'" : ""
var txtBgCol = (s[3])? "BGCOLOR='"+s[3]+"'" : ""
var titBgImg = (s[4])? "BACKGROUND='"+s[4]+"'" : ""
var txtBgImg = (s[5])? "BACKGROUND='"+s[5]+"'" : ""
var titTxtAli = (s[6] && s[6].toLowerCase()!="left")? "ALIGN='"+s[6]+"'" : ""
var txtTxtAli = (s[7] && s[7].toLowerCase()!="left")? "ALIGN='"+s[7]+"'" : ""
var add_height = (s[15])? "HEIGHT='"+s[15]+"'" : ""
if(!s[8]) s[8] = "Verdana,Arial,Helvetica"
if(!s[9]) s[9] = "Verdana,Arial,Helvetica"
if(!s[12]) s[12] = 1
if(!s[13]) s[13] = 1
if(!s[14]) s[14] = 200
if(!s[16]) s[16] = 0
if(!s[17]) s[17] = 0
if(!s[18]) s[18] = 10
if(!s[19]) s[19] = 10
hs = s[11].toLowerCase()
if(ps==20001108){
if(s[2]) ab="STYLE='border:"+s[16]+"px solid"+" "+s[2]+"'"
ap="STYLE='padding:"+s[17]+"px "+s[17]+"px "+s[17]+"px "+s[17]+"px'"}
var closeLink=(hs=="sticky")? "<TD ALIGN='right'><FONT SIZE='"+s[12]+"' FACE='"+s[8]+"'><A HREF='javascript:void(0)' ONCLICK='stickyhide()' STYLE='text-decoration:none;color:"+s[0]+"'><B>Close</B></A></FONT></TD>":""
var title=(t[0]||hs=="sticky")? "<TABLE WIDTH='100%' BORDER='0' CELLPADDING='0' CELLSPACING='0'><TR><TD "+titTxtAli+"><FONT SIZE='"+s[12]+"' FACE='"+s[8]+"' "+titCol+"><B>"+t[0]+"</B></FONT></TD>"+closeLink+"</TR></TABLE>" : ""
var txt="<TABLE "+titBgImg+" "+ab+" WIDTH='"+s[14]+"' BORDER='0' CELLPADDING='"+s[16]+"' CELLSPACING='0' "+titBgCol+" ><TR><TD>"+title+"<TABLE WIDTH='100%' "+add_height+" BORDER='0' CELLPADDING='"+s[17]+"' CELLSPACING='0' "+txtBgCol+" "+txtBgImg+"><TR><TD "+txtTxtAli+" "+ap+" VALIGN='top'><FONT SIZE='"+s[13]+"' FACE='"+s[9]+"' "+txtCol +">"+t[1]+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
if(nn4) {
with(eval(obj+"document")) {
open()
write(txt)
close()
}
}
>> else eval(obj+"innerHTML=txt")
tbody = {
Pos:s[10].toLowerCase(),
Xpos:s[18],
Ypos:s[19],
Transition:s[20],
Duration:s[21],
Alpha:s[22],
ShadowType:s[23].toLowerCase(),
ShadowColor:s[24],
Width:parseInt(eval(obj+iw)+3+sbw)
}
if(ie4) {
TipLayer.style.width = s[14]
tbody.Width = s[14]
}
Count=0
move=1
}
}
}
function MoveTip(e) {
if(move) {
var X,Y,MouseX = eval(mx),MouseY = eval(my); tbody.Height = parseInt(eval(obj+ih)+3)
tbody.wiw = parseInt(eval(ww+"+"+scl)); tbody.wih = parseInt(eval(wh+"+"+sct))
switch(tbody.Pos) {
case "left" : X=MouseX-tbody.Width-tbody.Xpos; Y=MouseY+tbody.Ypos; break
case "center": X=MouseX-(tbody.Width/2); Y=MouseY+tbody.Ypos; break
case "float": X=tbody.Xpos+eval(scl); Y=tbody.Ypos+eval(sct); break
case "fixed": X=tbody.Xpos; Y=tbody.Ypos; break
default: X=MouseX+tbody.Xpos; Y=MouseY+tbody.Ypos
}
if(tbody.wiw<tbody.Width+X) X = tbody.wiw-tbody.Width
if(tbody.wih<tbody.Height+Y+sbw) {
if(tbody.Pos=="float"||tbody.Pos=="fixed") Y = tbody.wih-tbody.Height-sbw
else Y = MouseY-tbody.Height
}
if(X<0) X=0
eval(obj+sl+"=X+PX;"+obj+st+"=Y+PX")
ViewTip()
}
}
function ViewTip() {
Count++
if(Count == 1) {
if(cssFilters&&FiltersEnabled) {
for(Index=28; Index<31; Index++) { TipLayer.filters[Index].enabled = 0 }
for(s=0; s<28; s++) { if(TipLayer.filters[s].status == 2) TipLayer.filters[s].stop() }
if(tbody.Transition == 51) tbody.Transition = parseInt(Math.random()*50)
var applyTrans = (tbody.Transition>-1&&tbody.Transition<24&&tbody.Duration>0)? 1:0
var advFilters = (tbody.Transition>23&&tbody.Transition<51&&tbody.Duration>0)? 1:0
var which = (applyTrans)?0:(advFilters)? tbody.Transition-23:0
if(tbody.Alpha>0&&tbody.Alpha<100) {
TipLayer.filters[28].enabled = 1
TipLayer.filters[28].opacity = tbody.Alpha
}
if(tbody.ShadowColor&&tbody.ShadowType == "simple") {
TipLayer.filters[29].enabled = 1
TipLayer.filters[29].color = tbody.ShadowColor
}
else if(tbody.ShadowColor&&tbody.ShadowType == "complex") {
TipLayer.filters[30].enabled = 1
TipLayer.filters[30].color = tbody.ShadowColor
}
if(applyTrans||advFilters) {
eval(obj+sv+hl)
if(applyTrans) TipLayer.filters[0].transition = tbody.Transition
TipLayer.filters[which].duration = tbody.Duration
TipLayer.filters[which].apply()
}
}
eval(obj+sv+vl)
if(cssFilters&&FiltersEnabled&&(applyTrans||advFilters)) TipLayer.filters[which].play()
if(hs == "sticky") move=0
}
}
function stickyhide() {
eval(HideTip)
}
function ReloadTip() {
if(nn4&&(evlw!=eval(ww)||evlh!=eval(wh))) location.reload()
else if(hs == "sticky") eval(HideTip)
}
function htm() {
if(sNav) {
if(hs!="keep") {
move=0;
if(hs!="sticky") eval(HideTip)
}
}
}
//-->
Any ideas/help/advice is greatly appreciated! Thank you! I have a jQuery Slideshow script that i'm using and it's all done in 6 lines. Code: $(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>
I'm having a problem centering it on my website and keeping the images behind each other every time a picture changes. The CSS uses absolute positioning to hide the images behind each other. The fadeIn part of the CSS uses relative positioning. The CSS for the fading image slideshow is at the end of the css. Code: .fadein {
position:relative;
width:100%;
height:300px;
background-color:#000;
overflow:hidden
}
.fadein img {
position:relative;
left:300px;
width:auto;
text-align:center;
top:0px;
}
jonathaneiger.com http://www.javascriptkit.com/javatut...rnalphp2.shtml Anyone have a decent way of adding a fade affect to this script? Hello, hoping someone can help. Have built a slide show for header using following, but there is a very annoying time lag between the photo changing and the caption changing (ie photo changes, then a brief moment later the caption changes). Can anyone tell me how to correct this so that the caption and the photo change simultaneously? Thanks in advance! <script type="text/javascript"> $(function() { $('#slideshow').cycle({ fx: 'fade', timeout: 3000, after: function() { $('#caption').html(this.alt); } }); }); </script> Hi I am populating the textboxes using a button . The code is Code: <input type="button" name="bt_autoFill" id="id_autoFill" value="Auto Fill" onclick="fillComponents()"/> this calls the javascript function Code: <script type="text/javascript">
function fillComponents()
{
document.getElementById("id_name").setAttribute("value","zedan");
document.getElementById("id_country").setAttribute("value","USA");
document.getElementById("id_Address").setAttribute("value","South Boulev.");
}
</script>
Now the code works fine when i click it the first time. However if i change a value or erase something in the textboxes the function dosnt work. all the elements are text boxes. Could you tell me what I am doing wrong ?? why doesnt it work the second time?? Hi, I am a Javascript newbie and I am trying to add a Javascript image application (called "HighSlide JS: http://highslide.com/#examples) to eBay listings. I am somewhat experienced with HTML and computers in general, but this javascript is all very confusing to me. My question is quite broad: How can I get this HighSlides script to show my images on my eBay listings? I am having trouble figuring out how to upload images to FTP servers or something, so that the script can use my images. I have Windows 7, and I do have Expression Web, if that means anything! I would be extremely grateful for any help! Thanks in advance! Hi I'm trying to get a slideshow working but the timings are all over the place. I can make it loop through once, neatly, but thereafter the timings seem to out - I have a loop set up to run five times. I think this is because the function is incrementing the delay values or something along those lines (I know there's a neater way to write this but I'm just starting out). Code: function slideWinder () {
var x = 1
for (var x = 1; x < 5; x++) {
$('#slideone').delay(0).fadeIn(0).delay(2000).fadeOut(400);
$('#slidetwo').delay(2000).fadeIn(400).delay(2000).fadeOut(400);
$('#slidethree').delay(4000).fadeIn(400).delay(2000).fadeOut(400);
$('#slidefour').delay(6000).fadeIn(400).delay(2000).fadeOut(400);
$('#slidefive').delay(8000).fadeIn(400).delay(2000).fadeOut(400);
$('#slidesix').delay(10000).fadeIn(400).delay(2000).fadeOut(400);
}
}
Lets say I have two images in a box Code: <body> <div id="box"> <img src="image1.jpg" id="image1" width="100" height="100" /> <img src="image2.jpg" id="image2" width="100" height="100" /> </div> </body> When I click on Image1 I want Image2 to get replaced with a new image, called Image3. So I tried this code: Code: var image1 = document.getElementById("image1");
image1.onclick = image1_click ();
function image1_click () {
new_image= new Image
new_image = document.getElementById("image2");
new_image.src="image3.jpg"
}
But instead of replacing the image on click, from some reason it replaces image2 with image3 from start/load. What should I do to make this work? Thank you. Hey all, First off, just wanted to send a big thanks out to everyone on this board that has helped me along my path, you all have been a really big help! Ok, now on to today's question. I have a nice little script that changes a company's logo (displayed in a side bar) when the user mouses over a part of an image map. Here is the basic code: Code: <head>
<?php
//assign array of links to string
$row_limit = $num_rows - 1;
for ($otmm_loop=0;$otmm_loop<$num_rows;$otmm_loop=$otmm_loop+1)
{
if ($otmm_loop == 0)
{
$otmm_image_string = "$pic_adr_array[$otmm_loop]".",";
}
elseif ($otmm_loop == $row_limit)
{
$otmm_image_string = "$otmm_image_string"."$pic_adr_array[$otmm_loop]";
}
else
{
$otmm_image_string = "$otmm_image_string"."$pic_adr_array[$otmm_loop]".",";
}
}
$s1 = "$otmm_image_string";
$qs1 = "\"".implode("\",\"",explode(",",$s1))."\"";
<script type="text/javascript">
function doChanges(y){
var z= y;
var imagevar = myimages[z];
var imagethis = this.href;
changeimage(imagevar,imagethis);
}
</script>
<script type="text/javascript">
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script type="text/javascript">
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(<?echo("$qs1");?>);
</script>
</head>
<body>
<a href="javascript:warp()"><img src="/images/OnTheMiningMap/rilogo.png" name="targetimage" border="2"></a>
<img src="http://www.the-rational-investor.com/images/OnTheMiningMap/<?echo("$map_version");?>"
BORDER="2"
usemap="#mymap">
<MAP NAME="mymap">
<area shape="rect" coords="<?echo("$rilogo_x_start");?>,<?echo("$rilogo_y_start");?>,<?echo("$rilogo_x_end");?>,<?echo("$rilogo_y_end");?>" onMouseover="doChanges(0)" href="http://www.therationalinvestor.ca/" rel="nofollow" target="_blank" Title="The Rational Investor" alt="The Rational Investor">
<area shape="rect" coords="<?echo("$autism_x_start");?>,<?echo("$autism_y_start");?>,<?echo("$autism_x_end");?>,<?echo("$autism_y_end");?>" onMouseover="doChanges(1)" href="http://www.autismbc.ca/" rel="nofollow" target="_blank" Title="Autism Society of BC" alt="Autism Society of British Columbia">
<area shape="rect" coords="<?echo("$britania_x_start");?>,<?echo("$britania_y_start");?>,<?echo("$britania_x_end");?>,<?echo("$britania_y_end");?>" onMouseover="doChanges(2)" href="http://www.britaniaminingmuseum.ca/" rel="nofollow" target="_blank" Title="Britannia Mining Museum" alt="Britannia Mining Museum">
<area shape="rect" coords="<?echo("$sable_x_start");?>,<?echo("$sable_y_start");?>,<?echo("$sable_x_end");?>,<?echo("$sable_y_end");?>" onMouseover="doChanges(3)" href="http://sableresources.com/" rel="nofollow" target="_blank" Title="Sable Resources - Shasta" alt="Sable Resources - Shasta">
<area shape="rect" coords="<?echo("$northgate_x_start");?>,<?echo("$northgate_y_start");?>,<?echo("$northgate_x_end");?>,<?echo("$northgate_y_end");?>" onMouseover="doChanges(4)" href="http://northgateexploration.com/Home/default.aspx" rel="nofollow" target="_blank" Title="Northgate Resources - Kemess South" alt="Northgate Resources - Kemess South">
<area shape="rect" coords="<?echo("$thompson_x_start");?>,<?echo("$thompson_y_start");?>,<?echo("$thompson_x_end");?>,<?echo("$thompson_y_end");?>" onMouseover="doChanges(5)" href="http://www.thompsoncreekmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Thompson Creek Metals - Endako" alt="Thompson Creek Metals - Endako">
<area shape="rect" coords="<?echo("$imperial_x_start");?>,<?echo("$imperial_y_start");?>,<?echo("$imperial_x_end");?>,<?echo("$imperial_y_end");?>" onMouseover="doChanges(6)" href="http://www.imperialmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Imperial Metals - Huckleberry" alt="Imperial Metals - Huckleberry">
<area shape="rect" coords="<?echo("$westerncoal_x_start");?>,<?echo("$westerncoal_y_start");?>,<?echo("$westerncoal_x_end");?>,<?echo("$westerncoal_y_end");?>" onMouseover="doChanges(7)" href="http://www.westerncoal.com/" rel="nofollow" target="_blank" Title="Western Coal - Brule, Dillon, Perry Creek" alt="Western Coal - Brule, Dillon, Perry Creek">
<area shape="rect" coords="<?echo("$peaceriver_x_start");?>,<?echo("$peaceriver_y_start");?>,<?echo("$peaceriver_x_end");?>,<?echo("$peaceriver_y_end");?>" onMouseover="doChanges(8)" href="http://www.peacerivercoal.com/" rel="nofollow" target="_blank" Title="Peace River Coal" alt="Peace River Coal">
<area shape="rect" coords="<?echo("$teckcoal1_x_start");?>,<?echo("$teckcoal1_y_start");?>,<?echo("$teckcoal1_x_end");?>,<?echo("$teckcoal1_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Fording River" alt="Teck Coal Fording River">
<area shape="rect" coords="<?echo("$teckcoal2_x_start");?>,<?echo("$teckcoal2_y_start");?>,<?echo("$teckcoal2_x_end");?>,<?echo("$teckcoal2_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Greenhills" alt="Teck Coal Greenhills">
<area shape="rect" coords="<?echo("$teckcoal3_x_start");?>,<?echo("$teckcoal3_y_start");?>,<?echo("$teckcoal3_x_end");?>,<?echo("$teckcoal3_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Line Creek" alt="Teck Coal Line Creek">
<area shape="rect" coords="<?echo("$teckcoal4_x_start");?>,<?echo("$teckcoal4_y_start");?>,<?echo("$teckcoal4_x_end");?>,<?echo("$teckcoal4_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Elkview" alt="Teck Coal Elkview">
<area shape="rect" coords="<?echo("$teckcoal5_x_start");?>,<?echo("$teckcoal5_y_start");?>,<?echo("$teckcoal5_x_end");?>,<?echo("$teckcoal5_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Coal Mountain" alt="Teck Coal Coal Mountian">
<area shape="rect" coords="<?echo("$imperial2_x_start");?>,<?echo("$imperial2_y_start");?>,<?echo("$imperial2_x_end");?>,<?echo("$imperial2_y_end");?>" onMouseover="doChanges(10)" href="http://www.imperialmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Imperial Metals - Mount Polley" alt="Imperial Metals - Mount Polley">
<area shape="rect" coords="<?echo("$teck_x_start");?>,<?echo("$teck_y_start");?>,<?echo("$teck_x_end");?>,<?echo("$teck_y_end");?>" onMouseover="doChanges(11)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck - Huckleberry" alt="Teck - Huckleberry">
<area shape="rect" coords="<?echo("$taseko_x_start");?>,<?echo("$taseko_y_start");?>,<?echo("$taseko_x_end");?>,<?echo("$taseko_y_end");?>" onMouseover="doChanges(12)" href="http://www.tasekomines.com/tko/Home.asp" rel="nofollow" target="_blank" Title="Taseko - Gibralar" alt="Taseko - Gibralar">
<area shape="rect" coords="<?echo("$roca_x_start");?>,<?echo("$roca_y_start");?>,<?echo("$roca_x_end");?>,<?echo("$roca_y_end");?>" onMouseover="doChanges(13)" href="http://www.rocamines.com/s/Home.asp" rel="nofollow" target="_blank" Title="Roca - Max" alt="Roca - Max">
<area shape="rect" coords="<?echo("$breakwater_x_start");?>,<?echo("$breakwater_y_start");?>,<?echo("$breakwater_x_end");?>,<?echo("$breakwater_y_end");?>" onMouseover="doChanges(14)" href="http://www.breakwater.ca/" rel="nofollow" target="_blank" Title="Breakwater - Myra Falls" alt="Breakwater - Myra Falls">
<area shape="rect" coords="<?echo("$hillsborough_x_start");?>,<?echo("$hillsborough_y_start");?>,<?echo("$hillsborough_x_end");?>,<?echo("$hillsborough_y_end");?>" onMouseover="doChanges(15)" href="http://www.hillsboroughresources.com/" rel="nofollow" target="_blank" Title="Hillsborough - Quinsam" alt="Hillsborough - Quinsam">
</MAP>
</body>
My question is, how can I get three different images (company logo, weekly price chart and monthly price chart - all of which are in an image folder on my server) to change on this one mouseover event. I tried replicating the function three times and altering each function's name but that ended up screwing the whole thing up. Any thoughts/suggestions would be greatly appreciated, Brian Hello all, I have a question regarding onmouseover on "a" tag. I currently have a list of "img" thumbnails which have onMouseOver attached to the "a" tag which wraps the "img". When the mouse is over the image, a "preview" of the image will load in another div via a javascript function, this javascript function has a jquery fadeto effect so the preview will fade into view. The problem now is if a user hover over multiple thumbnails quickly, the onMouseOver event is registered multiple times, so when the user finally stop hovering over multiple thumbnails quickly, the last thumbnail will receive the event multiple times and fades in not only once. Below is my code: function previewimage(loadimg){ jloadimg='<img src="../images/'+loadimg+'.png" />'; //stimulate a fade in effect by making the image has 0.7 opacity first $(#largeimage).fadeTo('fast', 0.7, function() { }); $(#largeimage).fadeTo('slow', 1, function() { }); document.getElementById('largeimage').innerHTML=jloadimg; } for the list of thumbnail images, I have: <a onMouseOver="previewimage('imagefile1');"><img src="path/to/thumbnail/image1.png" /></a> <a onMouseOver="previewimage('imagefile2');"><img src="path/to/thumbnail/image2.png" /></a> <a onMouseOver="previewimage('imagefile3');"><img src="path/to/thumbnail/image3.png" /></a> How do I cancel multiple event from running continuosly if the previous one is still in queue? |
|||||||