|
JavaScript - Unable To Get Caption To Change With Image Change
http://www.***.com/5.html
i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? Similar TutorialsHi guys, It's my first time to code in javascript... so I need a little help in changing the image captions in a gallery. Please find the files in the zip attached.. No effects needed for the caption change really... I don't want the captions to slide in like the images, I just want them to change when the images slide. Hope you guys can help me.. I've been at it for weeks, lol. Sorry a real noob here. I am trying to get a div's content to change using javascript but for some reason it is not working and i get no errors looking at the error console. the code that is waiting for the content... Code: <div style="font-weight: bold;">count = <div id="desc" style="float: left;"></div> descriptions to do.</div><br clear="all" /> the code that should change the content.... Code: <? echo("<script type=\"text/javascript\">
document.getElementById('desc').value='" . $count . "';
</script>");
?>
when i view the source code the javascript lines show like so... Code: <script type="text/javascript">
document.getElementById('desc').value='373';
</script>
do i have the javascript correct ? Hello I am trying to change the default date format within my date picker, but nothing I do seems to work. This is the relevant Code: Code:
$(function() {
Date.format = 'yy-mm-dd';
$('#popupDatepicker').datepick();
});
<p><b>Date Of Birth:</b><input type="text" name="dob" id="popupDatepicker"><br>
All I see is dd/mm/yy no matter what I change I need it in a format suitable for MySQL Thanks Hey everyone, I'm making a bit of a weird site on a server with no php, mysql etc. To save me work, I've included the header and footer using AJAX but would like to change the relevant nav bar image to the rollover image if the visitor is on that page. My javascript skills are TERRIBLE, but I came up with this anyway and was going to put it inbetween the <a> tags where the image currently sits. Probably for a very obvious reason unknown to me, the page just loads indefinitely making nothing work. Here's what I've got: Code: if (window.location='index.html') {
document.write('<img src="images/key/home-r.jpg" name="home" onMouseOver="over(5)" onMouseOut="out(5)">')
}
else {document.write('<img src="images/key/home.jpg" name="home" onMouseOver="over(5)" onMouseOut="out(5)">')}
Thanks so much for any help at all. Hi! Sorry for asking such noobish questions, I tried to search but couldnt find anything addressing my problem. It's probably pretty simple though. I have an image on a website. I want the image to change, after the user has clicked on it five times. In other words, on the first 4 clicks, nothing should happen. But the fifth click should change the source of the image. Here is my feeble attempt: Code: function image_changer(){
var i=0;
for (i=0;i<=5;i++)
{
document.getElementById('changingimage001').src = 'images/smile6.jpg';
}
}
HTML: Code: <img id="changingimage001" src="images/base.jpg" onclick="image_changer();" alt="a changing image" />' I quess my main confusion is this: How do I make a new iteration in my for loop happen only when the mouse is clicked (instead of all the iterations running trough as fast as possible)? Here is my code for two tab images. Code: <a href="#page-2"><img src="/images/but02.png" style="margin-top:8px; float:left;"></a>
<a href="#page-1"><img src="/images/but01.png" style="margin-top:8px; float:left;"></a>
I need to have it so when tab '#page-2' is clicked it will change the image to '/images/but03.png' and when tab '#page-1' is clicked it will change the image to '/images/but04.png' ? Its basically to show which tab is active, one image is lighter then the other. Can anyone help ? Can anyone link me to code that will change an image everyweek to an image that I define? I have 52 different images, one for every week.
I am quite new to JavaScript code and have a challenge. I would like to add a mouseover script to several different images e.g. Manufacturer logos which would cause a background image to change accordingly. There are eight different logos which would refer to eight background images respectively. I have found several scripts which cause the image which has the mouseover to change but not any which cause a different image to change. Is this practical using JavaScript? Any help is greatly appreciated!
Hi everyone. Can anyone help me , i need to make a onmouseover function , when u go with mouse on the left small image it automatically opens the large image in the right, can anyone help me with this ??? I have a function called onload that includes this: Code: window.onload=new function(){
...
if (menuletter!=false){
document.cookie="hddrv="+(menuletter)+"; path=/; expires="+exp.toGMTString();
document.enterIndex.src='enter2.gif';
// window.setTimeout("goIndex()",7000);
// return false;
}
...
}
<img border="0" name="enterIndex" src="enter1.gif" width="413" height="41">
If I uncomment the two lines and comment the document image swap line, they execute perfectly, so the routine works. But if I try to do the image swap instead of the two commented lines, it doesn't swap. Of course, the image enter1.gif and enter2.gif exist. What am I doing wrong? I Need some help with mouse overs. I have 2 images, Image A and Image B. I need to mouse over Image A and have Image B change. Please help.
I need a JavaScript image changer like this: When you mouse over photo1.jpg, it will change to photo2.jpg. When you mouse over photo2.jpg it will change to photo 3.jpg and so on untill photo5.jpg. Please keep this in JavaScript form :) Hi there, I have found some script to auto change an image on my website, but i would like to do this in 2 other places using completely new pictures. for ease i have set up 3 cells in a table and would like them to appear in each cell. Can any body help altering my code to allow this. The code i have so far is Code: <html lang="en">
<head>
<script type="text/javascript">
var c=0
var s
function photoGallery()
{
if (c%4==0){
document.getElementById('photo-gallery').src = "boots.jpg";
}
if (c%4==1){
document.getElementById('photo-gallery').src = "adidas.jpg";
}
if (c%4==2){
document.getElementById('photo-gallery').src = "play.jpg";
}
if (c%4==3){
document.getElementById('photo-gallery').src = "argos.jpg";
}
c=c+1
s=setTimeout("photoGallery()",1000)
}
</script>
</head>
<body onLoad="photoGallery()">
<table border="1">
<tr>
<td><img src="amazon.jpg" id="photo-gallery" width="420" height="260"></td>
<td>another image loop here</td>
<td>and another image loop here</td>
</tr>
</table>
</body>
</html>
Thank you in advance Code: function greet()
{
var hour = (new Date()).getHours();
var when = (hour > 17) ? "evening" : ( (hour > 11) ? "afternoon" : "morning" );
document.write('<img src="' + when + '.png" alt="Good ' + when + '">\n');}
This script puts up a png which gives a greeting depending on the time of day. I want instead to put the greeting as text. It's a bit ostentacious as it is.. I would appreciate any pointers. Site is here. Thank you. i am trying to use the most simple code i can to onmouseover of some text change 1 image. it will have multiple texts with different images for each one all displayed in one place. it seems to work well for me in IE, but on firefox the mouseover doesn't work. and on a mac it doesn't work in safari or firefox. any input is appreciated... here is the shortest version of the code i could put together. Code: <head>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function roll(img_name1, img_src1)
{
document[img_name1].src = img_src1;
}
//-->
</SCRIPT>
</head>
<body>
<a href="2_17_10/index.html" onmouseover="roll('poster','2_17_10/IMG_7075b.jpg')">2-17-10</a>
<img src="2_16_10/IMG_7072.jpg" name="poster" width=500></img>
</body>
</html>
Hi, i have a <td> with a background image and 3 other <td>'s that contains blank photos in them, i need 2 things that they'll make: 1. when i click on one td that contain blank image lets call it tdimg1 it will toggle the visibility of the div inside the first td lets call it tdframe and for the div lets call it divframe1, (i have a script that works) but the main issue is that when i click tdimg1 tdimg2 and tdimg3 it will show divframe1 divframe2 and divframe3 what i want is that it will show only one at a time, so if ill hit the tdimg2 it will show me divframe2 and if after that ill hit tdimg3 it will hide the divframe2 and appear the divframe3. 2.the tdframe have an image as a background lets call it basicbg.jpg, i want that when i will hit tdimg1 the background of the tdframe will change to lets say newbg1.jpg, and as ill hit it again it will go back to basicbg.jpg, as ill hit tdimg3 it will change to newbg3.jpg and if i wont "close" it and click tdimg2 it will just change it to newbg2.jpg thanks! Hi I am using the css image gallery I got from: http://www.dynamicdrive.com/style/cs...image-gallery/ I want to change the behaviour, currently an image is enlarged when a user hovers over the link/thumbail. I would like to change it so that the main image is instead shown onclick of the thumbnail, and remains enlarged until another click. Is this possible using some javascript? I don't know if this is possible, so I figured I'd ask a few gurus. I know it is possible to have an image change at a certain time of day, and it's also possible to have an image change by day, but is there a script to do both? What I want to do is have the first image show from 8am cst to 6pm cst mon-fri, it's our open sign for live chat. The the rest of the time have the second image. Is this possible with any type of script? Any help you can give is greatly appreciated! Hi, I have this simple code for gallery on my page. And everything working fine but when i click on small picture to change big picture if I'm page scroll up to top of page. So i scroll to the gallery change picture ad page scroll up to the top. What could be the reason? Here is live axample: http://www.galerija-galiotovic.kus-s...test-hrvatski# Code: <table id="Table_galerija">
<tr>
<td style="width:520px;height:445px;vertical-align:top;padding:20px;">
<h2 style="position:absolute;top:200px;color:#FFF;" id="naslov">Test hrvatski</h2>
<div id="slika_velika"><img id="glavna_slika" style="max-height:390px;max-width:520px;vertical-align:middle;" src="/slike/10012012_7119092522.jpg" alt="KUS Sinj" /></div></td>
<td>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/10012012_7119092522.jpg'"><img src="/slike/thumbnails/10012012_7119092522.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_7509043961.jpg'"><img src="/slike/thumbnails/12012012_7509043961.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_9295689431.jpg'"><img src="/slike/thumbnails/12012012_9295689431.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_8527430603.jpg'"><img src="/slike/thumbnails/12012012_8527430603.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_2126924535.jpg'"><img src="/slike/thumbnails/12012012_2126924535.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div id="gori"><a href="#" onmousedown="moveup()" onmouseup="clearTimeout(moveupvar)"><img src="/images/gori.png" width="119" height="23" alt="Top Sport" /></a></div>
<div id="doli"><a href="#" onmousedown="movedown()" onmouseup="clearTimeout(movedownvar)"><img src="/images/doli.png" width="119" height="23" alt="Top Sport" /></a></div></td>
</tr>
</table>
|
|||||||