www.webdeveloper.com
Results 1 to 15 of 15

Thread: text with rollover images?

  1. #1
    Join Date
    Oct 2011
    Posts
    8

    text with rollover images?

    I'd like to add text above my images when they pop-up. Is this possible? I'm not very fluent in JS. Here is my code...

    <body>

    <script language="JavaScript">
    <!--//pre-load images:
    if (document.images) {
    one = new Image();
    one.src ="images/A389075_jacket.jpg"
    two = new Image();
    two.src ="images/HTjacket.jpg"
    three = new Image();
    three.src ="images/funerarypromoposter-vert.jpg"
    four = new Image();
    four.src ="images/funerarypromoposter-horiz.jpg"
    five = new Image();
    five.src ="images/STD071710-front.jpg"
    six = new Image();
    six.src ="images/Jap2008tourposter-cityvenue.jpg"
    seven = new Image();
    seven.src ="images/PTwinter07tourposter.jpg"
    eight = new Image();
    eight.src ="images/nvlayout.jpg"
    }

    function switchit(imageName) {
    if(document.images)
    {
    document ['display'].src = imageName.src;
    }
    }

    function back()
    {
    if(document.images)
    {
    document ['display'].src = "images/blank.png";
    }
    }

    //-->
    window.defaultStatus=" "

    </script>

    <div class="thumbs">
    <table>
    <tr>
    <td width="200px" valign="top">
    <a href="#" onMouseOver="switchit(one);window.status='go';return true;"
    onMouseOut="back();"><img src="images/A389075_jacket-thumb.png" border="1" /></a>&nbsp;
    <a href="#" onMouseOver="switchit(two);window.status='go';return true;"
    onMouseOut="back();"><img src="images/HTjacket-thumb.png" border="1" /></a><br />
    <a href="#" onMouseOver="switchit(three);window.status='go';return true;"
    onMouseOut="back();"><img src="images/funerarypromoposter-vert-thumb.png" border="1" /></a>&nbsp;
    <a href="#" onMouseOver="switchit(four);window.status='go';return true;"
    onMouseOut="back();"><img src="images/funerarypromoposter-horiz-thumb.png" border="1" /></a><br />
    <a href="#" onMouseOver="switchit(five);window.status='go';return true;"
    onMouseOut="back();"><img src="images/STD071710-front-thumb.png" border="1" /></a>&nbsp;
    <a href="#" onMouseOver="switchit(six);window.status='go';return true;"
    onMouseOut="back();"><img src="images/Jap2008tourposter-cityvenue-thumb.png" border="1" /></a><br />
    <a href="#" onMouseOver="switchit(seven);window.status='go';return true;"
    onMouseOut="back();"><img src="images/PTwinter07tourposter-thumb.png" border="1" /></a>&nbsp;
    <a href="#" onMouseOver="switchit(eight);window.status='go';return true;"
    onMouseOut="back();"><img src="images/nvlayout-thumb.png" border="1" /></a>
    </td>
    <td width="1000px"><img src="images/blank.png" name="display" /></td>
    </tr>
    </table>
    </div>

    </body>

  2. #2
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700
    I'd use innerHTML.

    First, there may be better ways to achieve the whole effect, but to fit with what you've already got, try this...

    In each thumbnail, put this
    <a href="#" onMouseOver="switchit(one); textover('one'); window.status='go';return true;"
    onMouseOut="back();textover('foo'); "><img src="images/A389075_jacket-thumb.png" border="1" /></a>


    Then, in the table cell where your enlarged picture with text are to appear, add the extra line below;
    <td>
    <p><span id='texthere'></span></p>
    <img src="images/blank.png" name="display" />
    </td>

    Then in your javscript, add a function textover...

    Code:
    function textover(which){
    switch(which)
    {
      var newtext = "";
       case 'one':
      newtext = 'The text you want over picture one';
      break;
      case 'two':
      newtext = 'The text you want over picture two';
      break;
      //etc
    }
    document.getElementById('textthere').innerHTML = newtext;
    }
    Note that you don't have any entry in the switch for 'foo'. That way, on mouse out, the text gets cleared.

  3. #3
    Join Date
    Oct 2011
    Posts
    8
    Thanks. It's not working for me as is. Do I need to have an id tag in my CSS file for the 'texthere'? Sorry, I'm not very well versed in JS.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Lightbulb Something else to consider ...

    This may be the start of an alternate solution for you.
    It uses <a> tags to advance, reverse or randomize display
    but it should be easy enough to change to a roll-over solution.

    See if it makes sense to you to do the modification:
    Code:
    <html>
    <head>
    <title> Gallery </title>
    <script type="text/javascript">
    var imgPtr = 0;
    var baseURL = 'http:/www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = [
      ['11.jpg','Exhausted: Worn out'],
      ['21.jpg','Angry: Display rage'],
      ['31.jpg','Embarrassed: Self-conscious'],
      ['41.jpg','Enraged: Infuriate'],
      ['51.jpg','Overwhelmed: Overpower, crush'],
      ['12.jpg','Confused: Perplex'],
      ['22.jpg','Hysterical: Emotional frenzy'],
      ['32.jpg','Happy: Joyful, pleased, glad'],
      ['42.jpg','Ashamed: Feeling disgraced'],
      ['52.jpg','Hopeful: Long for']
    ]
    function $_(IDS) { return document.getElementById(IDS); }
    function slideshow() {
      $_('myPic').src=baseURL+imgList[imgPtr][0];
      $_('myPic').title=imgList[imgPtr][1];
      $_('myCmmt').innerHTML=imgList[imgPtr][1];
    }
    function slideShowChange(direction) {
      imgPtr = imgPtr + direction;
      if (imgPtr < 0) { imgPtr = imgList.length-1; }
      imgPtr = imgPtr % imgList.length;
      slideshow();
    }
    function slideShowRandom() {
      imgPtr = Math.floor(Math.random()*imgList.length);
      slideShowChange(0);
    }
    window.onload = function() { slideShowChange(0); }
    </script>
    </head>
    <body>
    <div style="text-align: center">
      <img src="" id="myPic" title="" border="0" height="150" width="200"> <br>
      <div id="myCmmt"></div> <p>
      <a href="#" onclick="slideShowChange(-1); return false;"> Previous</a> |
      <a href="#" onclick="slideShowRandom(); return false;"> Random</a> |
      <a href="#" onclick="slideShowChange(1); return false;"> Next </a>
    </div>
    </body>
    </html>

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Lightbulb

    And, in case you cannot modify the JS, see this onMouseover version:
    Code:
    <html>
    <head>
    <title> Gallery </title>
    <script type="text/javascript">
    var imgPtr = 0;
    var baseURL = 'http:/www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = [
      ['11.jpg','Exhausted: Worn out'],
      ['21.jpg','Angry: Display rage'],
      ['31.jpg','Embarrassed: Self-conscious'],
      ['41.jpg','Enraged: Infuriate'],
      ['51.jpg','Overwhelmed: Overpower, crush'],
      ['12.jpg','Confused: Perplex'],
      ['22.jpg','Hysterical: Emotional frenzy'],
      ['32.jpg','Happy: Joyful, pleased, glad'],
      ['42.jpg','Ashamed: Feeling disgraced'],
      ['52.jpg','Hopeful: Long for']
    ]
    function $_(IDS) { return document.getElementById(IDS); }
    function slideshow() {
      $_('myPic').src=baseURL+imgList[imgPtr][0];
      $_('myPic').title=imgList[imgPtr][1];
      $_('myCmmt').innerHTML=imgList[imgPtr][1];
    }
    function slideShowChange(direction) {
      imgPtr = imgPtr + direction;
      if (imgPtr < 0) { imgPtr = imgList.length-1; }
      imgPtr = imgPtr % imgList.length;
      slideshow();
    }
    function slideShowRandom() {
      imgPtr = Math.floor(Math.random()*imgList.length);
      slideShowChange(0);
    }
    function slideShow(pick) {
      imgPtr = pick;
      slideshow();
    }
    window.onload = function() { slideShowChange(0); }
    </script>
    </head>
    <body>
    <div style="text-align: center">
      <img src="" id="myPic" title="" border="0" height="150" width="200"> <br>
      <div id="myCmmt"></div> <p>
    <!--  <a href="#" onclick="slideShowChange(-1); return false;"> Previous</a> --> 
      <a href="#" onMouseover="slideShow(0); return false;">1</a> 
      <a href="#" onMouseover="slideShow(1); return false;">2</a> 
      <a href="#" onMouseover="slideShow(2); return false;">3</a> 
      <a href="#" onMouseover="slideShow(3); return false;">4</a> 
      <a href="#" onMouseover="slideShow(4); return false;">5</a> 
      <a href="#" onclick="slideShowRandom(); return false;"> Random</a> 
      <a href="#" onMouseover="slideShow(5); return false;">6</a> 
      <a href="#" onMouseover="slideShow(6); return false;">7</a> 
      <a href="#" onMouseover="slideShow(7); return false;">8</a> 
      <a href="#" onMouseover="slideShow(8); return false;">9</a> 
      <a href="#" onMouseover="slideShow(9); return false;">10</a> 
    <!--  <a href="#" onclick="slideShowChange(1); return false;"> Next </a> -->
    </div>
    </body>
    </html>

  6. #6
    Join Date
    Oct 2011
    Posts
    8
    Thanks JMRKER. I'd definitely prefer to keep the layout I have though and simply add text over my full-sized images, so I think chestertb's reply is the way to go, however I am getting a syntax error on the 4th line of javascript:

    var newtext = "";

    Any idea why?

    Thanks again for the help.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Exclamation

    Quote Originally Posted by mikeriley View Post
    Thanks JMRKER. I'd definitely prefer to keep the layout I have though and simply add text over my full-sized images, so I think chestertb's reply is the way to go, however I am getting a syntax error on the 4th line of javascript:

    var newtext = "";

    Any idea why?

    Thanks again for the help.
    There is no particular reason to get on error on the assignment.
    You could try moving the assignment to just before the switch() command.

    It no change then post the code or a link to the code that YOU are currently using.

  8. #8
    Join Date
    Oct 2011
    Posts
    8

  9. #9
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700
    With the assignment, try
    var newimage = 'anything'; //it doesn't matter because whatever is assigned will be overwritten as soon as you roll over.

  10. #10
    Join Date
    Oct 2011
    Posts
    8
    I'm still not getting any text to appear at all.

    Again, thanks so much for your help.

  11. #11
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700
    My bad.
    The var newtext = '' needs to go outside the switch statement. (Sorry... it must have been late when I responded to your past the first time.)

    HTML Code:
    function textover(which){
    var newtext = "";
    switch(which)
    {
       case 'one':
      newtext = 'The text you want over picture one';
      break;
      case 'two':
      newtext = 'The text you want over picture two';
      break;
      //etc
    }
    document.getElementById('textthere').innerHTML = newtext;
    }
    Cheers
    CTB

  12. #12
    Join Date
    Oct 2011
    Posts
    8
    Still no text appearing.

  13. #13
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700
    Get rid of your anchor tags.

    What you need in the HTML is this...
    HTML Code:
    <img src="images/A389075_jacket-thumb.png" border="1" style="cursor:pointer" onMouseOver="switchit(one);textover('one');window.status='go';return true;"
           onMouseOut="back();textover('foo');"/>&nbsp;
    <img src="images/HTjacket-thumb.png" border="1"  style="cursor:pointer" onMouseOver="switchit(two);textover('two');window.status='go';return true;"
           onMouseOut="back();textover('foo');"/><br />
    There's also a typo on the javascript function.
    It should read
    document.getElementById('texthere').innerHTML = newtext;
    (not 'textthere')... again, probably my bad late at night.
    Make those changes at it will all work. (I've tested it.)
    Cheers
    CTB

  14. #14
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Arrow

    Quote Originally Posted by chestertb View Post
    Get rid of your anchor tags.

    What you need in the HTML is this...
    ...
    There's also a typo on the javascript function.
    It should read
    document.getElementById('texthere').innerHTML = newtext;
    (not 'textthere')... again, probably my bad late at night.
    Make those changes at it will all work. (I've tested it.)
    Cheers
    CTB
    Good Eyes!!!

  15. #15
    Join Date
    Oct 2011
    Posts
    8
    Wonderful. Thank you so much. I really appreciate your patience.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles