2 x Mouseover

  • Y2k88
  • Novice
  • Novice
  • Y2k88
  • Posts: 21

Post 3+ Months Ago

Finally found where I belong...

Short Intro
A newb trying to make better websites with practice
Starting to learn Javascript and CSS
and Can okaylish modify certain HTML, Java code

So yeh, I've got a problem I don't know how to solve:
Imagine this:

You have a text hyperlink
Below it, are 2 images, Image A and Image B

the Problem
When I Mouseover the Text Hyperlink, how can I get Image A to change into Image C, Image A to change into Image D

As you see, i mite not be very good at explaining stuff, but hope you guys (geniuses) you could my problem.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Y2k88 wrote:
When I Mouseover the Text Hyperlink, how can I get Image A to change into Image C, Image A to change into Image D


image a - > c
image b - > d

Well from the title of the topic, I am assuming that you ca do one, or the other but not both. Assuming that you know how to do the image rollovers already:

Code: [ Select ]
onmouseover="imageRolloverCodeA;imageRolloverCodeB;"


Just put both lines of code in the onmouseover, separated by a semicolon. Semicolon tells browser it is a new line and and new instruction.

If you don't know how to do single rollovers, then reply and I will explain.
  • Y2k88
  • Novice
  • Novice
  • Y2k88
  • Posts: 21

Post 3+ Months Ago

Thanx,

but I've tried that already, exactly, before i came here for help

But couldn't get it to work

A lil description on what it would do:
When i mouseover the text hyperlink, image A would change to image C, Image B would change to image D

But when i mouseout, only image D would change back to image A, image C stays as image C

So yeh, I was like, eh?

And does anyone know how to do an onclick image slideshow,
so that when u click like a button, image A changes to image B
if u click it again, image B changes to image C
and if u click it again, image C changes back to image A

Cheers
  • Y2k88
  • Novice
  • Novice
  • Y2k88
  • Posts: 21

Post 3+ Months Ago

Here is what I had

Did I do anything wrong?

onMouseOver="MM_swapImage('LeftSpacer','','images/daiwa1.gif',1);MM_swapImage('RightSpacer','','images/daiwa2.gif',1)"
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Can you post the code you used or a link to an eg? That should work. What errors does it throw?

The slidesow I would do an array:
Code: [ Select ]
var imagePaths=array(
  "images/path/file.jpg",
  "images/path/file2.jpg",
  "images/path/file3.jpg"
)
currentImage=0;

function doSlideChange(){
  currentImage++;
  if (currentImage>Imagepaths.length){
    currentImage=0;
  }
  [ImageID].src=imagePaths[currentImage];
}
  1. var imagePaths=array(
  2.   "images/path/file.jpg",
  3.   "images/path/file2.jpg",
  4.   "images/path/file3.jpg"
  5. )
  6. currentImage=0;
  7. function doSlideChange(){
  8.   currentImage++;
  9.   if (currentImage>Imagepaths.length){
  10.     currentImage=0;
  11.   }
  12.   [ImageID].src=imagePaths[currentImage];
  13. }


Thats just off the top of my head so there may be better ways of doing it, and it may have some bugs.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Can't say that I have ever seen MM_swapImage before :?
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

MM_swapImage is one of those macromedia functions that comes with dreamweaver and is designed specifically for a rollover menu. Trying to modify it for a slideshow would be less trouble that creating one from scratch I think. The one rtm came up with off the top of his head works for me with a few trivial changes.

Code: [ Select ]
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
var imagePaths = Array(
  "images/file1.gif",
  "images/file2.gif",
  "images/file3.gif"
)
currentImage=0;

function doSlideChange(){
  currentImage++;
  if (currentImage>=imagePaths.length){
    currentImage=0;
  }
  document.images['imgHolder'].src=imagePaths[currentImage];
}
// -->
</script>
</head>
<body>
<a href="#" onclick="doSlideChange()">Change</a>
<br><br>
<img name="imgHolder" height="32" width="32" src="images/file1.gif" alt="">
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script type="text/javascript">
  5. <!--
  6. var imagePaths = Array(
  7.   "images/file1.gif",
  8.   "images/file2.gif",
  9.   "images/file3.gif"
  10. )
  11. currentImage=0;
  12. function doSlideChange(){
  13.   currentImage++;
  14.   if (currentImage>=imagePaths.length){
  15.     currentImage=0;
  16.   }
  17.   document.images['imgHolder'].src=imagePaths[currentImage];
  18. }
  19. // -->
  20. </script>
  21. </head>
  22. <body>
  23. <a href="#" onclick="doSlideChange()">Change</a>
  24. <br><br>
  25. <img name="imgHolder" height="32" width="32" src="images/file1.gif" alt="">
  26. </body>
  27. </html>
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I just realized there are two separate questions in this thread. :oops:

The MM_swapImage is matched with a MM_swapImgRestore() - at least I think that's the name of it anyway (something like that). If I remember correctly, when you swap an image the data for the swap is recorded in an array and when restore is called onmouseout the last swap is just undone, so if you use MM_swapImage twice in a row, only the last swap will be undone when restore is called. I'm going out on a limb here as I haven't used these functions in a long time, but I'm pretty sure that's why a double rollover won't undo properly.

I'm assuming you're using the restore function in the onmouseout. If that's the case maybe you could try using the swap function for both mouseover and mouseout and explicitly change them both, because I think the restore function will only change the second one.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

How about not using the propriatory Macromedia functions :) I'd just do the

.src="images/file1.gif"

It's less extensible but it should save a lot of hassle IMHO

of course you could just do it with CSS.....
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Well, if he's using Dreamweaver, as I assume he is since MM functions are there, then I don't think they object to using their proprietary code, although I assume that they would object to modifying it. I don't think calling the function from both onmouseout and onmouseover would be tantamount to modifying the code. However, it would probably just be simpler to make your own swap function. Maybe something like:

Code: [ Select ]
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function swap(img,imgFile) {
        document.images[img].src = "images/" + imgFile;
}
// -->
</script>
</head>
<body>
<a href="#"
onmouseover="swap('imgA','file2.gif');swap('imgB','file4.gif')"
onmouseout="swap('imgA','file1.gif');swap('imgB','file3.gif')"
>swap</a><br><br>
<img name="imgA" src="images/file1.gif" height="32" width="32" alt="">
<img name="imgB" src="images/file3.gif" height="32" width="32" alt="">
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script type="text/javascript">
  5. <!--
  6. function swap(img,imgFile) {
  7.         document.images[img].src = "images/" + imgFile;
  8. }
  9. // -->
  10. </script>
  11. </head>
  12. <body>
  13. <a href="#"
  14. onmouseover="swap('imgA','file2.gif');swap('imgB','file4.gif')"
  15. onmouseout="swap('imgA','file1.gif');swap('imgB','file3.gif')"
  16. >swap</a><br><br>
  17. <img name="imgA" src="images/file1.gif" height="32" width="32" alt="">
  18. <img name="imgB" src="images/file3.gif" height="32" width="32" alt="">
  19. </body>
  20. </html>

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 28 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.