Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Text - font change for respective image ref on <a href...>

Status
Not open for further replies.
sanders720

sanders720

Programmer
Aug 2, 2001
421
US
I have an html document that has images referenced as follows:

<a href="ManualP4.htm#highvoltagearea"><img src="defaultgraphics/highvoltagearea.jpg" alt="High Voltage Area" width="75" height="50"></a>

When I click on the image, the pages moves to the text description for that image lower on the same page, as follows:

<a name = "highvoltagearea" id = "highvoltagearea"> </a>
<p>The area is high voltage. In addition to general user precautions, chemical and/or explosive precaution should be taken.</p>

My question is, how can I get the relevant text to the image to be bold, or a different color? There are about 20 of these descriptions with 20 corresponding images. When I click on a new image, everything should be set back to the regular font and the new image should be bold, or a different color.

Thanks in advane for any help you can provide.
 
Sort by date Sort by votes
Try this on, let me know how it fits:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">
.normal { font-weight: normal; }
.bold { font-weight: bold; }
</style>

<script language="javascript"><!--

var ids = new Array('one','two','three');

function highlight(theId) {
    var p;
    for (var i = 0; i < ids.length; i++) {
        p = document.getElementById(ids[i]);
        while (p.tagName != "P") p = p.nextSibling;
        p.className = "normal";
    }
    
    p = document.getElementById(theId);
    while (p.tagName != "P") p = p.nextSibling;
    
    p.className = "bold";
}

--></script>

</head>

<body>

<a href="#" onclick="highlight('one');">One</a>
<a href="#" onclick="highlight('two');">Two</a>
<a href="#" onclick="highlight('three');">Three</a>

<a name="one" id="one"></a>
<p>One one one one one one one one one one one one one one one one one.</p>

<a name="two" id="two"></a>
<p>Two two two two two two two two two two two two two two two two two.</p>

<a name="three" id="three"></a>
<p>Three three three three three three three three three three three three.</p>
</body>
</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Just for the record (since I know you're not) -- if you're at privilege of using just cool browsers, your code can be a lot shorter:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">
p { font-weight: normal; }
p:target { font-weight: bold; }
</style>

</head>

<body>

<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>

<p id="one">One one one one one one one one one one one one one one one one one.</p>
<p id="two">Two two two two two two two two two two two two two two two two two.</p>
<p id="three">Three three three three three three three three three three three three.</p>

</body>
</html>
My Mozilla would qualify as a cool browser and shows this as expected.
 
Upvote 0 Downvote
My FF is also a "cool browser". IE sucks and that's just a sad fact of life.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
clFlaCA:

Quite excellent really, thanks for the help!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
818
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
770
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
231
Alt255
Alt255
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
224
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top