|
JavaScript - How Can I Change An Image Using Javascript?
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 :) Similar TutorialsHi 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? Hello, my name is Paula an I am making a website where I have an image changing on my homepage each time it is reloaded. I found a code that lets me do this. This is the script: <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // Set up the image files to be used. var theImages = new Array() // do not change this // To add more image files, continue with the // pattern below, adding to the array. theImages[0] = '1.gif' theImages[1] = '2.gif' theImages[2] = '3.gif' theImages[3] = '4.gif' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } </script> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage(); // End --> </script> It worked fine, with four images. The thing is I wanted to put up to 16 in it. So I tried ad up to 16 numbers with images but as soon as I put more than four, it would not work. Finally what I did was to copy four times the same numbers and then it worked (0-3 , four times)... so then I had many images shown randomly but the problem now is that the random is very uneven among the images. Meaning, I get variation among very few, and many time repeating one. This is what my script looks like now: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // Set up the image files to be used. var theImages = new Array() // do not change this // To add more image files, continue with the // pattern below, adding to the array. theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Alacenaconcajadegalletes-pgWShadow3.jpg' theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/AltarinGasStation-pgSH.jpg' theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/AltaroftheDeadwithEmbroideredTablecloth-pgSH.jpg' theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Altarsobreparedverde-pgSH.jpg' theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/BricksandClotheslineSH-pg.jpg' theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Cocinaamarilla-pgSH.jpg' theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LatadeTecateconenchufes-pgSH.jpg' theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LedgewithTecates-wcSH.jpg' theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Mesaamarilla-pgSH-pg.jpg' theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/MosaicwithPhotographofVictorianInterior-pgSH.jpg' theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Paredrojaconjualas-pg.jpg' theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/red_cupboardSH.jpg' theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/RoomwithLandscapeofBurgundy-pgSH.jpg' theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Cocinaamarilla-pgSH.jpg' theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/YellowandRedPorch-wcSH.jpg' theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LedgewithTecates-wcSH.jpg' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } // End --> </script> So my question is: How can I manage with this script to have all my images showing up equally when they change in refresh? I don not mind if they are not random, I also tried to remove the random property but could not manage either. Any ideas? Thank you so much, I really appreciate your help. Paula I am creating a photography website and am almost there with coding a very simple image viewer with clickable thumbnails etc. I have used the following script to change the images; Code: <script>
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>
the main image is like this; Code: <img name="mainimage" src="../Images/wedding-photo-01-bride-getting-ready.JPG" title="bride getting ready"/> And the links/images are like this..... Code: <a href="javascript:changeImage('../Images/wedding-photo-01-bride-getting-ready.JPG')">
<img class="thumbbox" id="mainimage" src="../Images/wedding-photo-01-bride-get-thumb.JPG" alt="wellis photography logo" title="bride getting ready">
</a>
This works fine, but I would also like a caption underneath the main image that changes at the same time. Is there a way to do this simply? Perhaps using some variation of the following script? Code: <script type="text/javascript">
document.write(document.getElementById('myimage').title);
</script>
Also, one other thing - is it possible to add a 'fade' transition to my 'changeimage' function? Thanks in advance Basically, i have an image that i want it to be resized when i maximize and change browser size, so it is always centered. I have to use only javascript. I tried many window.resize functions but nothing works. Lets say the image is called 0000.jpg. Anyone has any ideas how to make this? Thank you in advance. 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. Hello. The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html>
<head>
<style type='text/css'>
#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>
<script type='text/javascript'>
function div_bg(team){
document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";
}
</script>
</head>
<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>
Thanks in advance!! 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? Hello. I am trying to create a javascript function which when declaring a new object, would give it properties. I'll try and show what I am doing with some code, then explain it. Code:
<script type="text/javascript">
var Draggable = {
Create: function(e, options) {
newStyle(e, options);
}
};
function newStyle(destination, options) {
for (x in options) {
document.getElementById(destination).style.x = options[x];
}
}
new Draggable.Create('text', options = {border: "1px solid red"});
</script>
<div id="text">Text</div>
With this code, I am trying to create a new instance. I am then trying to change the border of the div with the id of "text". I know doing .style.x is what is breaking, but I'm not sure how to make it so the x will, work or to return that back to the Create function and work with it there? Any help would be appreciated. Thanks. Hi can you change this javascript for me please -------------------------------------------------------------------------- -------------------------------------------------------------------------- Code: <script type = "text/javascript">
function LogIn(){
loggedin=false;
username="";
password="";
username=prompt("Username:","");
username=username.toLowerCase();
password=prompt("Password:","");
password=password.toLowerCase();
if (username=="guest" && password=="login") {
loggedin=true;
window.location="home-page.html";
}
if (username=="guest2" && password=="login2") {
loggedin=true;
window.location="home-page2.html";
}
if (loggedin==false) {
alert("Invalid login!");
}
}
</SCRIPT>
---------------------------------------------------------------------------------------------------------------------------------------------------- Can someone change this script to instead of prompts i would like two text boxes and a button to login p.s There is also a different bit but thats for the button if you need this part then please ask Hi, When is a java script change in Production server,do we need to force the web users to clear their cache... Or is there any better way of doing it apart from using no cache header in HTML 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. 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 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 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>
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. 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? 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)? 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.
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 ? |
|||||||