SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question problems with swapping images in an iframe

    Hi,

    I have previously written to this forum with the same problem but got no replies... But I have decided to give it another go

    I am working on this site which uses the iframe, which can be viewed here:
    http://www.lisalillywhite.co.uk/test/index.htm

    The iframe has actually been used on cv and portolio pages only. Once you go to CV page and click on one of the links in the CV you are taken to the portfolio page of the particular project which appear within the iframe. However the header image (the one where the navigation sits) remains of the CV page. How can I make this image change into the porfolio one?

    I have changed the way I am loading the image into the table cell - I have replaced the css class with the straightforward "background" html tag in the table cell. I gave it the name TOPIMG.

    I'd appreciate any help from a Java Script specialist - I am obviously not one of them!

    Cheers

    gayeta

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi gayeta,

    Sometimes an unanswered question will slip by us - but not often. We are just volunteers, after all.

    There are several different ways to do this - here's one:

    In 'cvframe.htm' add the id to the td and add the function in the script element in the head:
    Code:
    <td width="700" height="50" background="images/img_cv_top.jpg" name="topimg" id="topimg">
    Code:
    function setTitleBkgnd(imgUrl)
    {
      var ele = null;
      if (document.getElementById) {
        ele = document.getElementById('topimg');
      }
      else if (document.all) {
        ele = document.all['topimg'];
      }
      if (ele && ele.style) {
        ele.style.backgroundImage = 'url(' + imgUrl + ')';
      }
    }
    In 'cv.htm' call the function in the A element's onclick attribute:
    Code:
    <a href="port_tape.htm" target="main" onclick="top.setTitleBkgnd('images/img_portfolio_top.img')">Tape</a>
    I haven't tested it so let me know if it doesn't work.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks, it did the job! : )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •