Solved

Image does not swap with Layers - Behaviors

Posted on 2004-09-20
8
309 Views
Last Modified: 2013-12-24
Hello all. I'm trying to get an image to swap with a mouse over.   But I have a feeling it is not possible in this situation -- unless an EXPERT has a solution.

FIrst please look at this page:  http://www.freecreditcardprocessing.com/maa/

If you hover over the image that says "Free internet software", you will see the image change .

I'm trying to do the same thing with this test recreation at:  http://www.rowby.com/cards/

If you hover over the text box that says "Image does not swap" you will see that the image does not swap :)

The behaviour I gave the layer is onmouseover swapimages.  I included the second image but it does not work. Probably, I assume, because the initial layer is text, not a graphic.

Is there a workaround?  I already have a behaviour "onclick" gotourl present.

Here is a copy and paste of the relevant source code:

<div style="position: absolute; width: 161px; height: 171px; cursor: hand;  z-index: 1; left: 34px; top: 293px" id="layer2" onclick="FP_goToURL(/*href*/'http://www.rowby.com')" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'images/004a.jpg')">
                                                                        <table border="2" cellspacing="0" style="border-collapse: collapse" width="103%" id="table127" height="137" cellpadding="2" bordercolor="#0534B3">
                                                                              <tr>
                                                                                    <td height="24" bgcolor="#0534B3">
                                                                                    <p align="center"><b>
                                                                                    <font face="Arial" color="#FFFFFF">
                                                                                    SOFTWARE</font></b></td>
                                                                              </tr>
                                                                              <tr>
                                                                                    <td valign="top" bgcolor="#FFFFFF">
                                                                                    <p align="center"><b>
                                                                                    <font size="6" face="Arial" color="#FF0000">
                                                                                    FREE<br>
                                                                                    </font>
                                                                                    <font face="Arial">
                                                                                    Experts Exchange<br>
                                                                                    Image Does not &quot;swap&quot;</font></b></td>
                                                                              </tr>
                                                                        </table>
                                                                        </div>



THANKS!
0
Comment
Question by:Rowby Goren
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
8 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 12110310
I'm confused, are they both your sites?
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12111925
HI

 http://www.freecreditcardprocessing.com/maa/ is client site.  I have been asked to make the page load faster.  It is filled with graphics (among other things) which is making the page load very slowly.  

I am making testing the change at http://www.rowby.com/cards/.   Once the changes are made then the page will be moved to the client site.

So far I have replaced most of the graphics with text.  All that remains is to recreate the image swap --if possible.  

Rowby

0
 
LVL 14

Accepted Solution

by:
hhammash earned 500 total points
ID: 12119848
Hi,

Create your texts on layers and onhover show the layer.  You can give the layers the same position and size of the picture.

hhammash
0
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 
LVL 9

Author Comment

by:Rowby Goren
ID: 12122368
Hi hhmmash,

That sounds like it would do it.  

Cna you give me the code to insert into the source -- I can't seem to find those particular behavours in FrontPage 2003's "Insert Behavious" menu.

Once you give it to me I can find tune the position etc.

Thanks!
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12133245
I tried this code, but it doesn't work:   Any suggestions?  If not from Hhammash, anyone else??? -- I will split points....

<div style="position: absolute; width: 161px; height: 171px; cursor: hand;  z-index: 1; left: 36px; top: 303px" id="layer2" onclick="FP_goToURL(/*href*/'http://www.rowby.com')" onhover="FP_showLayer('layer4')">

Here is the link to the current TEST page:  

http://www.rowby.com/cards/

Thanks
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12136740
Thanks for the overall answer, hammash.

I am posting a new question asking for refinement of the code. I can't find the behaviour etc in the built in Front Page behaviour menu, so I tried writing it myself, but it doesn't work right yet.

0
 
LVL 14

Expert Comment

by:hhammash
ID: 12138618
Sorry rowby I was away for two days.  I read your question for the code just now.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12138656
No problem.  You can answerit in the new updated question.  
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question