JavaScript - [javascript] - Onmouseover Links Change Image

hi,

please ignore this thread..it is a duplicate of one already active.

MODS please delete.

apologies for my mistake.

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>

hi ! i have a div which some how i make when mouseover it become cursor and link to other page i wants to, and it has also some text inside of it which is also linked to other page and when mouseover on text it change colors too, but the problem is if mouse come on div it will not change the color of text inside of div, so what i wants is it will change the color of text too when mouseover on the div, here is code i am using:
Code:

<-- THIS IS IN CSS file -->
div.test{
	position:relative;
	font-family:Arial;
	font-size: 12px;
	padding-left: 82px;
	padding-top: 47px;
	width: 162px;
	padding-bottom: 15px;
	cursor:pointer;
        cursor:hand;
}

div.test a{
	color:#000;
	text-decoration: none;
}
div.test a:hover{
	color:#4E6D00;
	text-decoration: none;
}

<-- THIS IS IN HTML file -->
        <div onClick="document.location='otherpage.html';" class="test">
        	<a href="otherpage.html">here is all content,This is content hyperlinked</a>
        </div>

you notice i am using cursor in css so when mouseover it becomes hand, what i wants is when it will become hand the text inside of it will also change the color, for now it change only if i mouseover to that text, thanks for any quick help please

Hey,

I currently have my menu on a web page set out using the following method:
Code:

<div class="linkbox" onmouseover="this.className='linkbox2'" onmouseout="this.className='linkbox'" onclick="location.href='http://www.upthegame.net/';"> General Chat </div>

I was wondering if there was a way using javascript to set ALL <div>'s with the class name "linkbox" to change to the class name "linkbox2" onmouseover and return to "linkbox" onmouseout. I would like this to be in a seperate file, I'm guessing this would probably be within an onload function or something along those lines.

I'm only familiar with basic JS so please go easy on me Any help is much appreciated.

Thanks,
Tom.

hi all,

I really need help with this topic. I have to use onMouseOver to change the content of an iframe. I'm trying to use an array but I'm confused and I'm not really sure if what I'm doing is correct and it doesnt work. I will appreciate your help and understanding.

Thanks a lot!

here is part of my code..


var frame=new Array(6);
frame[0]="page1.html";
frame[1]="page2.html";
frame[2]="page3.html";
frame[3]="page4.html";
frame[4]="page5.html";
frame[5]="page6.html";
var j=0;

function nextFrame()

{
if (j < 5)
{
j++;
document.getElementById(frame).contentDocument=frame[j];

}
return;
}

<span onMouseOver="nextFrame()" > <img name="upperImage" src="something.jpg" width=350 height=250 /></span>

<iframe id="frame1" name="frame1" src="" width=350 height=250 frameborder="0"> </iframe>


Please let me know if at least I'm in the right track.

Thanks

Hi

not really used to java but have an image map with about 90 hotspots. All i want to do is simply change the color of a hotspot when the mouse rolls over.
I have really only been able to find solutions for introducing images on mouse over.

Any help appreciated

thanks

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, I'm trying to get the pic to change when the mouse rolls over the button. I used this template of code and it works:

Code:

<A HREF="http://www.cnn.com" 
onMouseOver="document.pic1.src='menu1on.gif'"
onMouseOut="document.pic1.src='menu1off.gif'">
<IMG SRC="menu1off.gif" BORDER=0 NAME="pic1">
</a>

The problem occurs when I attempt to change a *second button* to have two buttons change on the same page. Here is how the code for two buttons looks side by side while it works:

Code:

	<a href="development.html">
		<img height="20" src="http://mywebsite.com/SIDE4H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a><br />
<a href="exhibitions.html">
		<A HREF="" onMouseOver="document.pic1.src='SIDE5H2.png'"onMouseOut="document.pic1.src='SIDE5H.png'"><IMG SRC="http://mywebsite.com/SIDE5H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br />

Here is the code after I add the javascript to two buttons. When I do this the buttons *do not* change (switch images), but do display one image properly on the site:

Code:

<a href="development.html">
		<img height="20" src="http://mywebsite.com/SIDE4H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a><br />
		<a href="exhibitions.html">
		<A HREF="" onMouseOver="document.pic1.src='SIDE5H2.png'"onMouseOut="document.pic1.src='SIDE5H.png'"><IMG SRC="http://mywebsite.com/SIDE5H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br />
<a href="careers.html">
		<A HREF="" onMouseOver="document.pic1.src='SIDE6H2.png'"onMouseOut="document.pic1.src='SIDE6H.png'"><IMG SRC="http://mywebsite.com/SIDE6H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br />
		<a href="contactus.html">
		<img height="20" src="http://mywebsite.com/SIDE7H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a></td>
		<td colspan="2" style="height: 148px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
		<td style="width: 148px; height: 148px">

Any ideas? I hope the code displays ok on your screen.

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

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 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.

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!!

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,
I am not very experienced with javascript and got stuck doing the following. I have placed some image rollovers on one of my pages..where when a user rolls over some text links..and image appropriate to that text is showen...when the mouse moves away from the links then a blank image is displayed as a place holder. this is all simple...here is where i am stuck. The place holder has a specific size...but the rest of the images that are displayed when the text is rolled over have different sizes, some are vertical some are hortizontal. i do not want to have to resize every image so that it properly fits the place holder...add the white borders and so on...so that the image is dispalyed properly.
Is there a way to have the size be changed for each image...so that the size doesnt get inherited from the place holder, but so that the script applies the size associated with each individual image.
example
place holder is 20 x 20
image 1 is 100 x 200
image 2 is 200 x 100
the place holder is loaded...when the mouse moves over the first link...image 1 replaces the place holder...but instead of taking on the size of 20x20 it has to be displayed at its own size of 100 x 200...
how can i do this?
thank you for all of your help