Solved

Image does not swap with Layers - Behaviors

Posted on 2004-09-20
8
311 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
Get MongoDB database support online, now!

At Percona’s web store you can order your MongoDB database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card. Handle your MongoDB database support now!

 
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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

622 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