adapting script to change text. Help for beginner

Discussion in 'JavaScript' started by SlowAsChristmas, Jun 15, 2007.

0
  1. #1
    I am trying to adapt some code to highlight certain parts of the text. Here is what I am working with:

    <script type="text/javascript">
    function showPic(myPic) {
    var source = myPic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text = myPic.getAttribute("title");
    var description = document.getElementById("description");
    description.firstChild.nodeValue = text;
    }
    </script>
    </head>
    <body>
    <h1>gallery1.htm</h1>
    <ul>
    <li>
    <a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;">Fireworks</a>

    </li>
    <li>
    <a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this); return false;">Coffee</a>
    </li>
    <li>
    <a href="images/rose.jpg" title="A red, red rose" onclick="showPic(this); return false;">Rose</a>
    </li>
    <li>

    <a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a>
    </li>
    </ul>
    <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
    <p id="description">Click an image!</p>
    </body>
    </html>

    So the text is being taken from the title attribute. I need to use more text, like some lines from a play, and want it to be pre-formatted. Is there a way to format text in the title attribute? Or is there a better way to grab the text from a different place? Basically I would like a few short lines of a play to be displayed under the image instead of just a short description. Also I need the lines of the different actors to be highlighted in some way when they are selected. Any ideas would be huge help, just a beginner. Point me in the right direction please.
     
    SlowAsChristmas, Jun 15, 2007 IP
  2. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #2
    Look up the longdesc attribute.

    For the highlighting, you need to add each "line" in a node, such as a <ul> list and then add a mouseover/hover effect.
     
    krt, Jun 15, 2007 IP
  3. SlowAsChristmas

    SlowAsChristmas Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I see how the longdesc would work, problem is this has to be a single file. The image part is not necessary. I have reduced it down to this as a starting point:

    <html>
    <head>
    <script type="text/javascript">
    function showText(myText) {

    //var source = myPic.getAttribute("href");
    //var placeholder = document.getElementById("placeholder");
    //placeholder.setAttribute("src",source);

    var text = myText.getAttribute("title");
    var description = document.getElementById("description");
    description.firstChild.nodeValue = text;
    }


    </script>
    </head>
    <body>
    <ul>
    <li>
    <a href="images/fireworks.jpg" title="A fireworks display" onclick="showText(this); return false;">Groucho</a>

    </li>
    <li>
    <a href="images/coffee.jpg" title="A cup of black coffee" onclick="showText(this); return false;">Chico</a>
    </li>
    </ul

    <p id="description">Click an Actor</p>
    </body>

    Could I replace this line: var text = myText.getAttribute("title");
    with something so I am taking the text not from the title attribute? What about loading some <pre> tags into an array? Or selecting individual <pre> elements some other way?
    Thanks again to anyone offering some ideas.
     
    SlowAsChristmas, Jun 15, 2007 IP