Debt Consolidation - Loans - Mortgages - Payday Advance - Credit Report
PDA

View Full Version : adapting script to change text. Help for beginner

SlowAsChristmas
Jun 15th 2007, 5:17 pm
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.
krt
Jun 15th 2007, 7:35 pm
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.
SlowAsChristmas
Jun 15th 2007, 7:56 pm
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.