Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Member Arkantos's Avatar
    Join Date
    Jul 2005
    Posts
    66
    Member #
    10732
    hello there!

    i have a small problem that needs a little of your thought and guidance.

    let me explain.

    say there is a table 3X3, the cells are called A1, A2, A3, and so on, in a page
    now there are images loaded in the cells.

    when the pointer is hovering over A3, i want the image in A3 as well as B2 to swap.
    and on mouse out the images should return to original.

    i can use PHP, CSS and JS, though i would like NOT to use JS.
    i am fairly competent in PHP, and only slightly competent in CSS

    i hope i have been able to explain my problem properly.

    please help.

    Thank you,
    Arkantos.
    No bastard ever won a war by dying for his country, he won it by making the other poor dumb bastard dying for his country.
    General George S. Patton (US Army)

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    You'll definitely be able to do it with JS. It's been done with CSS (see, for example, http://www.dottedi.biz/codesamples/rollover.html ); however, I think in this case it might be a better plan to achieve it with JS, since we're going from specifying layout and style and into specifying behavior.

  4. #3
    Member Arkantos's Avatar
    Join Date
    Jul 2005
    Posts
    66
    Member #
    10732
    Dear ShadowFiend

    if you say its better to do it in JS, then i will take your word for it.
    you have have helped me out of many tight spots than i can remember

    but i dont know much JS.

    it would be very helpful if you would explain the thing in moderate detail.

    once again in you debt,
    Arkantos.
    No bastard ever won a war by dying for his country, he won it by making the other poor dumb bastard dying for his country.
    General George S. Patton (US Army)

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    In this case you'll be wanting an onmouseover handler on every section that needs rolling over, and an onmouseout handler. I'd advise you still do the rollover on the main item via CSS, just use onmouseover/onmouseout to handle the one that isn't actually being hovered over, but needs to change. Give each item an id (say, b2). Then you'd do something like this:
    Code:
    document.getElementById('a1').onmouseover = function()
      { document.getElementById('b2').style['background-position'] = '-222px'; };
    document.getElementById('a1').onmouseout = function()
      { document.getElementById('b2').style['background-position'] = '0px'; };
    You'll notice that we switch the background-position, just as we would in CSS. The only difference is that this is running in Javascript. This allows us to still take advantage of the no-preload feature that using CSS rollovers gives us.

    Also, you'll have to put that in an onLoad function:
    Code:
    window.onload = function()
      {
        document.getElementById('a1').onmouseover = function()
          { document.getElementById('b2').style['background-position'] = '-222px'; };
        document.getElementById('a1').onmouseout = function()
          { document.getElementById('b2').style['background-position'] = '0px'; };
      }
    That should run somewhere in the <head> of your page. Note that a better solution is to have it load when the DOM is ready -- there are several scripts available that give you that ability (see Google).

  6. #5
    Member Arkantos's Avatar
    Join Date
    Jul 2005
    Posts
    66
    Member #
    10732
    Dear ShadowFiend,

    thank you for this.

    i'll try this out, and get back to you.

    strength and wealth,
    Arkantos.
    No bastard ever won a war by dying for his country, he won it by making the other poor dumb bastard dying for his country.
    General George S. Patton (US Army)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com