Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Image does not swap with Layers - Behaviors

Posted on 2004-09-20
8
Medium Priority
?
313 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 2000 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
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

Veeam Disaster Recovery in Microsoft Azure

Veeam PN for Microsoft Azure is a FREE solution designed to simplify and automate the setup of a DR site in Microsoft Azure using lightweight software-defined networking. It reduces the complexity of VPN deployments and is designed for businesses of ALL sizes.

Question has a verified solution.

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

When deciding to adopt any help desk solutions many factors should be explored before taking decisions. This will change from business to another but in general there are some kind of rule of thumb. Here are some quick tips: Do we need only ticket…
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
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…

721 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