Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to add change image onmouseover to alredy change text on mouseover 1

Status
Not open for further replies.
nesin

nesin

Technical User
Aug 30, 2011
6
CA
Hello,
I would like to make this script work for my images as well but don't know how. When I use onmouseover I would like to change my image1 to something like image1a and then onmouseout from image1a to image1. So far text is showing fine :)
Thank you very much!


<script type="text/javascript"><!--

function showtext1(logo, text)
{
logo.src="arrowstochop_1.jpg";
document.getElementById("text").style.display="inline";
document.getElementById("text").innerHTML=text;
logo.onmouseout=fadeOut();
{
logo.src="arrowstochop_1.jpg";
document.getElementById("text").style.display="none";
document.getElementById("text").innerHTML="none";
}
}
function showtext2(logo, text)
{
logo.src="arrowstochop_2.jpg";
document.getElementById("text").style.display="inline";
document.getElementById("text").innerHTML=text;
logo.onmouseout=fadeOut();
{
logo.src="arrowstochop_2.jpg";
document.getElementById("text").style.display="none";
document.getElementById("text").innerHTML="none";
}
}
function showtext3(logo, text)
{
logo.src="arrowstochop_3.jpg";
document.getElementById("text").style.display="inline";
document.getElementById("text").innerHTML=text;
logo.onmouseout=fadeOut();
{
logo.src="arrowstochop_3.jpg";
document.getElementById("text").style.display="none";
document.getElementById("text").innerHTML="none";
}
}
function showtext4(logo, text)
{
logo.src="arrowstochop_4.jpg";
document.getElementById("text").style.display="inline";
document.getElementById("text").innerHTML=text;
logo.onmouseout=fadeOut();
{
logo.src="arrowstochop_4.jpg";
document.getElementById("text").style.display="none";
document.getElementById("text").innerHTML="none";
}
}
function showtext5(logo, text)
{
logo.src="arrowstochop_5.jpg";
document.getElementById("text").style.display="inline";
document.getElementById("text").innerHTML=text;
logo.onmouseout=fadeOut();
{
logo.src="arrowstochop_5.jpg";
document.getElementById("text").style.display="none";
document.getElementById("text").innerHTML="none";
}
}
function showtext6(logo, text)
{
logo.src="arrowstochop_6.jpg";
document.getElementById("text").style.display="inline";
document.getElementById("text").innerHTML=text;
logo.onmouseout=fadeOut();
{
logo.src="arrowstochop_6.jpg";
document.getElementById("text").style.display="none";
document.getElementById("text").innerHTML="none";
}
}
function showtext7(logo, text)
{
logo.src="arrowstochop_7.jpg";
document.getElementById("text").style.display="inline";
document.getElementById("text").innerHTML=text;
logo.onmouseout=fadeOut();
{
logo.src="arrowstochop_7.jpg";
document.getElementById("text").style.display="none";
document.getElementById("text").innerHTML="none";
}
}
--></script><table>
<tbody>
<tr>
<td><img onmouseover="showtext1(this, 'ONEONEONEONEONE')" src="arrowstochop_1.jpg" />
<img onmouseover="showtext2(this, 'TWOTWOTWO')" src="arrowstochop_2.jpg" />
<img onmouseover="showtext3(this, 'NEWNENWNENWNENWNENWNE')" src="arrowstochop_3.jpg" />
<img onmouseover="showtext4(this, 'ROWOOOOOOOOOOOOOOW')" src="arrowstochop_4.jpg" />
<img onmouseover="showtext5(this, 'FIFTHROWOOOO')" src="arrowstochop_5.jpg" />
<img onmouseover="showtext6(this, 'ROOOOOOOOOOOOOOOOW')" src="arrowstochop_6.jpg" />
<img onmouseover="showtext7(this, 'SEEEEEEEVEEEEN')" src="arrowstochop_7.jpg" />&#160;</td>
</tr>
<tr>
<td><div id="text"></div></td>
</tr>
</tbody>
</table>


Use your mouse to go over each arrow and learn more.

<table border="0" name="banner">
</table>
 
Sort by date Sort by votes
Lets condense your functions into 1 so its easier to manage, no need to have 7 functions when they all essentially do the same thing.:

Code: 
function showtext(logo, text) 
{
logo.src=logo.src.split(".")[0] + "a.jpg" +; [green]//this would change the image from arrowstochop_1.jpg to arrowstochop_1a.jpg. It uses the original source to generate the new one.  [/green]
document.getElementById("text").style.display="inline";
document.getElementById("text").innerHTML=text;
}

[green]//We then make our onmouseout function to change it back.[/green]
function fadeout(logo,text){
logo.src=logo.src.split(".")[0].substr(0,logo.src.length-1) + ".jpg" +; [green]//this would change the image from arrowstochop_1a.jpg back to arrowstochop_1.jpg. It uses the changed source to generate the original one.  [/green]
document.getElementById("text").style.display="none";
document.getElementById("text").innerHTML="none";
}

Then in the HTML:

Code: 
<img onmouseover="[red]showtext[/red](this, 'TWOTWOTWO');" [blue]onmouseout="[fuchsia]fadeout(this);[/fuchsia]"[/blue] src="arrowstochop_2.jpg" />
<img onmouseover="[red]showtext[/red](this, 'NEWNENWNENWNENWNENWNE');" [blue]onmouseout="[fuchsia]fadeout(this);[/fuchsia]"[/blue] src="arrowstochop_3.jpg" />
<img onmouseover="[red]showtext[/red](this, 'ROWOOOOOOOOOOOOOOW');" [blue]onmouseout="[fuchsia]fadeout(this);[/fuchsia]"[/blue]  src="arrowstochop_4.jpg" />
<img onmouseover="[red]showtext[/red](this, 'FIFTHROWOOOO');" [blue]onmouseout="[fuchsia]fadeout(this);[/fuchsia]"[/blue]  src="arrowstochop_5.jpg" />
<img onmouseover="[red]showtext[/red](this, 'ROOOOOOOOOOOOOOOOW');"  [blue]onmouseout="[fuchsia]fadeout(this);[/fuchsia]"[/blue] src="arrowstochop_6.jpg" />
<img onmouseover="[red]showtext[/red](this, 'SEEEEEEEVEEEEN');" [blue]onmouseout="[fuchsia]fadeout(this);[/fuchsia]"[/blue] src="arrowstochop_7.jpg" />&#160;</td>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
I can't get it to work. Tried different things and it is always Error on page message. What am I doing wrong?
 
Upvote 0 Downvote
I wrote it straight into the reply box, so there may have been some errors.

Skimming over it, I see I have a couple of superfluous "+" sings. Just remove those.

Code: 
logo.src=logo.src.split(".")[0] + "a.jpg" [red]+[/red];

and

logo.src=logo.src.split(".")[0].substr(0,logo.src.length-1) + ".jpg" [red]+[/red];

If its still errors out, post the error so I know what's happening.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Hello,
now the text is there and it changes dinamically but it doesn't know how to find the images.

Thak you!

P.S. Sorry, I didn't know how to post an Error comment. Do I start a new thread or somehow edit this one or something else ?

This is the script I have (images are in the same folder and named the same I think).


<HTML>
<head>
<script language="JavaScript">
<!--
function showtext(logo, text)
{
logo.src=logo.src.split(".")[0] + "a.jpg"; //this would change the image from arrowstochop_1.jpg to arrowstochop_1a.jpg. It uses the original source to generate the new one.
document.getElementById("text").style.display="inline";
document.getElementById("text").innerHTML=text;
}

//We then make our onmouseout function to change it back.
function fadeout(logo,text){
logo.src=logo.src.split(".")[0].substr(0,logo.src.length-1) + ".jpg"; //this would change the image from arrowstochop_1a.jpg back to arrowstochop_1.jpg. It uses the changed source to generate the original one.
document.getElementById("text").style.display="none";
document.getElementById("text").innerHTML="none";
}

//-->
</script>
</head>

<body>

<table>
<tbody>
<tr>
<td>
<img onmouseover="showtext(this, 'TWOTWOTWO');" onmouseout="fadeout(this);" src="arrowstochop_1.jpg" />
<img onmouseover="showtext(this, 'NEWNENWNENWNENWNENWNE');" onmouseout="fadeout(this);" src="arrowstochop_2.jpg" />
<img onmouseover="showtext(this, 'ROWOOOOOOOOOOOOOOW');" onmouseout="fadeout(this);" src="arrowstochop_3.jpg" />
<img onmouseover="showtext(this, 'FIFTHROWOOOO');" onmouseout="fadeout(this);" src="arrowstochop_4.jpg" />
<img onmouseover="showtext(this, 'ROOOOOOOOOOOOOOOOW');" onmouseout="fadeout(this);" src="arrowstochop_5.jpg" />
<img onmouseover="showtext(this, 'SIXSIXSIXSIXSIXSIXSIXSIX');" onmouseout="fadeout(this);" src="arrowstochop_6.jpg" /></td>
</tr>
<tr>
<td><div id="text"></div>
</td>
</tr>
</tbody>
</table>

Use your mouse to go over each arrow and learn more.

<table border="0" name="banner">
</table>


</body>
</HTML>
 
Upvote 0 Downvote
The Images should be located in the same folder as the the file this is running in. The string manipulation was off sorry, as I said I typed this into the reply box, so there were bound to be some errors.

Code: 
script type="text/javascript">
function showtext(logo, text) 
{
logo.src=logo.src.split(".")[0] + "a.jpg"; //this would change the image from arrowstochop_1.jpg to arrowstochop_1a.jpg. It uses the original source to generate the new one.  
document.getElementById("text").style.display="inline";
document.getElementById("text").innerHTML=text;
logo.title=logo.src;
}

//We then make our onmouseout function to change it back.
function fadeout(logo,text){
[red]var basefilename=logo.src.split(".")[0];
logo.src=basefilename.substr(0,basefilename.length-1) + ".jpg";[/red]
//this would change the image from arrowstochop_1a.jpg back to arrowstochop_1.jpg. It uses the changed source to generate the original one.  
document.getElementById("text").style.display="none";
document.getElementById("text").innerHTML="none";
}
</script>

The string manipulation there wasn't actually returning the proper values. Its fixed now, so assuming your images are in the form of arrowstochop_#.jpg and arrowstochop_#[red]a[/red].jpg where # is a n umber then the sources should now work properly.

To post errors just copy the error here, its just text, so you can copy and paste it in a post. You can surround it by [ignore][/ignore] tags or even [ignore]
Code:
[/ignore] if you want to get the nice boxes.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Error
Click to expand...
I am relly sorry, to bother you again. I even made a new set of images and copied the names from the script to be sure they are the same but they will not show up. Thank you so very much for all your help!
 
Upvote 0 Downvote
That's it "error"? What are the names of your images? what does the script look like now?

As I said the images need to have the name arrowtochop and a number .jpg if its different i need t know what it is.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Error
Click to expand...
I must be doing something wrong :(
I keep the script and image files in a same folder. These are the names of my images (I did rename > copy > and paste them in here):
arrowstochop_1.jpg
arrowstochop_1a.jpg
arrowstochop_2.jpg
arrowstochop_2a.jpg
arrowstochop_3.jpg
arrowstochop_3a.jpg
......
arrowstochop_7.jpg
arrowstochop_7a.jpg


This is from my html/code file:

<HTML>
<head>

<script type="text/javascript">
function showtext(logo, text)
{
var basefilename=logo.src.split(".")[0];
logo.src=logo.src.split(".")[0] + "a.jpg"; //this would change the image from arrowstochop_1.jpg to arrowstochop_1a.jpg. It uses the original source to generate the new one.
document.getElementById("text").style.display="inline";
document.getElementById("text").innerHTML=text;
logo.title=logo.src;
}

//We then make our onmouseout function to change it back.
function fadeout(logo,text){
var basefilename=logo.src.split(".")[0];
logo.src=basefilename.substr(0,basefilename.length-1) + ".jpg";
//this would change the image from arrowstochop_1a.jpg back to arrowstochop_1.jpg. It uses the changed source to generate the original one.
document.getElementById("text").style.display="none";
document.getElementById("text").innerHTML="none";
}
</script>


</head>

<body>

<table>
<tbody>
<tr>
<td>
<img onmouseover="showtext(this, 'TWOTWOTWO');" onmouseout="fadeout(this);" src="arrowstochop_1.jpg" />
<img onmouseover="showtext(this, 'NEWNENWNENWNENWNENWNE');" onmouseout="fadeout(this);" src="arrowstochop_2.jpg" />
<img onmouseover="showtext(this, 'ROWOOOOOOOOOOOOOOW');" onmouseout="fadeout(this);" src="arrowstochop_3.jpg" />
<img onmouseover="showtext(this, 'FIFTHROWOOOO');" onmouseout="fadeout(this);" src="arrowstochop_4.jpg" />
<img onmouseover="showtext(this, 'ROOOOOOOOOOOOOOOOW');" onmouseout="fadeout(this);" src="arrowstochop_5.jpg" />
<img onmouseover="showtext(this, 'SIXSIXSIXSIXSIXSIXSIXSIX');" onmouseout="fadeout(this);" src="arrowstochop_6.jpg" /></td>
</tr>
<tr>
<td><div id="text"></div>
</td>
</tr>
</tbody>
</table>

Use your mouse to go over each arrow and learn more.

<table border="0" name="banner">
</table>


</body>
</HTML>
 
Upvote 0 Downvote
Notrhing look wrong now, testing it here with correctly named images shows me it works.

Not much I can say now, other than check your image names, some servers are case sensitive so filename.JPG is different to FileName.jpg and it may not load.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Error
Click to expand...
Hello Vacunita,
Code again was not working properly because of the wrong pathway but I asked "around" for help and this is what I got. Now I can use it on my site but you made it possible and I want to thank you again :)
Nesin

<script type="text/javascript"><!--

function showtext(logo, text)

{

logo.src=logo.src.substr(0, logo.src.lastIndexOf(".", logo.src)) + "a.jpg";

document.getElementById("text").style.display="inline";

document.getElementById("text").innerHTML=text;

logo.title=logo.src;

}

function fadeout(logo,text){

logo.src=logo.src.substr(0, logo.src.lastIndexOf(".", logo.src)-1) + ".jpg";

document.getElementById("text").style.display="none";

document.getElementById("text").innerHTML="none";

}


//--></script>

 
Upvote 0 Downvote
Glad you got it working.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
373
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
305
lexer
lexer
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
268
Rayj0000
Rayj0000
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
345
xwb
xwb
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
471
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top