Swapping TWO images with one mouse over. Using FPswap behaviors

Question

Good afternoon.

I am trying to swap two images both restoring to their previous state on mouseout.  While I know there is javascript out there that accomplishes this i would like to figure out how to do it using FP swapImg.

Here's what I have so far:

<a href="products/bonding_fasteners.html">
<img alt="" height="185" src="images/products/image1.jpg" width="195" id="img23,img50" class="style23" onmouseout="FP_swapImgRestore(2,1,/*id*/'img23',/*url*/'images/navigation/products/bf1.png',2,2,/*id*/'img50',/*url*/'images/products/image1.jpg')" onmouseover="FP_swapImg(2,1,/*id*/'img23',/*url*/'images/navigation/products/bf2.png',2,2,/*id*/'img50',/*url*/'images/products/2image1.jpg');" /></a>

I have a client who is insisting on this feature and I'd love to see how Expression Web handles this in its own code.

Thanks so much,
_Cardinal

Answer 1

That's not EW's "own code". That's old, clunky, FrontPage code.

And EW is gradually dropping all the old FP stuff that it kept around for compatability. MS stopped developing FrontPage over a decade ago; it makes no sense in this day and age to resurrect that garbage. Use industry-standard methods with javascript or jQuery or CSS; those are the modern, current ways to do it, and the only way that you and your client can be sure that it will work on all browsers and all platforms. You have no guarantees with old FrontPage junk.

Go to www.cssplay.co.uk and see the wonders that can be created with just CSS.

---

How many SEO experts does it take to change a lightbulb lightbulbs buy light bulbs neon lights sex porn.

Answer 2

I am using Expression 3.  

...and inserting the swap image in the behaviors section.  Does Expression 4 utilize the newer codes in an easy to use menu like behaviors.  I don't mind writing in the CSS script manually.  However, if Expression 4 utilizes the newer scripts from an easy to insert section I'll upgrade.

Thanks!

Michael

Answer 3

No, EW4 doesn't use newer code.  That is old FrontPage code for backward compatibility since many EW users, initially, came from Frontpage, and there is no reason to update it.  The prefered route is to stop using it.  EW isn't going to try and guess which of the many modern methods you might want to use to swap images.  Google and ye shall find.  :)

Answer 4

Well, if you have a retail version of EW3, then EW4 is a free upgrade for you. Look above in the Forum FAQ - Start Here thread for details. EW4 has a number of improvements that make it worthwhile (especially since it's free). Download the other programs that come with it too.

EW is a just website design tool. EW will help you build the page and it lets you use anything you like for video, interactive forms, photos, Flash, music, etc.--but you need to choose from the huge array of stuff available to you on the web. EW doesn't supply that (except for some holdover stuff from FP for compatability, but there is less and less with each new release).

I've never used FP Behaviors, but I would be very, very leery of using them in 2012, given the number of browsers on the market and the proliferation of people surfing via Android and iOS. Plus, they don't work if a visitor has javascript turned off; that's why pure CSS solutions are so brilliant--ever browser has to support CSS.

---

How many SEO experts does it take to change a lightbulb lightbulbs buy light bulbs neon lights sex porn.

Answer 5

As others have correctly noted, the decrepit old FP Behaviors in EW are sloppy, bloated, obtrusive, truly junky javascript that is over ten years old, and wasn't very good even when it was written. There are many, many alternatives today, any of which are far superior to the crap included in EW, which is only there for those poor lost souls coming from FrontPage. Hopefully, they will be gone in the next version (the behaviors, that is ;-).

This comes up fairly often, so I spent a few minutes just now creating an exemplar, which you can see here. The first two (top) set of images swap using simple inline javascript, like this:

<p>
<img alt="spade" height="266" src="images/spade_glossy.jpg" width="226" onmouseover="this.src='images/symbol_club.jpg'" onmouseout="this.src='images/spade_glossy.jpg'"/>
</p>

The bottom set use the :hover pseudo-selector and CSS, no scripting needed, to swap the images. The caveat is that IE6 doesn't support :hover on arbitrary elements, if that matters to you. Of course, the first method doesn't work if the visitor has scripting turned off (neither do those behaviors, BTW ;-).

Anyway, view that exemplar, use "View| Page Source" to get the source code, load it into a new document in EW, and test it. You'll have to use your own images, of course, so just change the source attributes to match your own.

Note that there are other methods. For example, the inline script method
could be made completely unobtrusive by adding an event listener and
extracting the script to an external file. It is left as an exercise for the reader to determine whether other methods are preferable for their purposes, but these two have the virtue of being quick, easy to implement, and NOT FP behaviors.  ;-)

cheers,
scott

---

Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

Answer 6

And if I read your title correctly and you want to swap two images at the same time with one mouseover, extend Scott's example for the javascript solution to:

<p>
<img id="firstimg" alt="spade" height="266" src="images/spade_glossy.jpg" width="226" onmouseover="this.src='images/symbol_club.jpg'; document.getElementById('secondimg').src='images/symbol_heart.jpg'" onmouseout="this.src='images/spade_glossy.jpg'; document.getElementById('secondimg').src='images/symbol_diamond.jpg'"/>
</p>
<p>
<img id="secondimg" alt="diamond" height="218" src="images/symbol_diamond.jpg" width="217" onmouseover="this.src='images/symbol_heart.jpg'; document.getElementById('firstimg').src='images/symbol_club.jpg'" onmouseout="this.src='images/symbol_diamond.jpg'; document.getElementById('firstimg').src='images/spade_glossy.jpg'" />
</p>

Both images will swap when either is moused over.  Using document.getElementById, you can extend your effects beyond the current element, 'this'.

As with anything, test your method in all the current browsers you intend to support.  Javascript requires the visitor to have that enabled, but most do.

Answer 7

Ah, yes, good catch, Kathy. Missed that "two images" bit (actually, forgot it after reading all the way down to the end of the thread ;-). Even better argument for extracting it and making it unobtrusive, especially if it's to be used in more than one location or page. Then it can also be made reusable in other projects that way, too.

cheers,
scott

---

Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

Answer 8

Simple enough. Thanks!

Michael