I'm trying to set up a page where there will be several titles in a row, with a descriptive paragraph below. When the user scrolls over the titles, the paragraph will change corresponding to the title they are hovering over. I would like each title to be a different color, and the font color of the paragraph should change to match the title's color. The problem I'm having is getting the paragraph's color to change.
Here's my example:
<script type="text/javascript">
function onover(caption)
{document.getElementById('text').innerHTML=caption;}
{document.getElementById('text2').innerHTML=caption;}
</script>
<a onmouseover="onover('Paragraph 1')" style="color:green">Title 1</a>
<a onmouseover="onover('Paragraph 2')" style="color:red">Title 2</a>
</br>
<div id="text" style="color:green">Paragraph 1</div>
<div id="text2" style="color:red"></div>
Updated Since OP wanted to replace the text,
<script type="text/javascript">
function onover(caption,color) {
document.getElementById('text').innerHTML=caption;
document.getElementById('text').style.color=color;
document.getElementById('text2').style.color=color;
}
</script>
<a onmouseover="onover('Paragraph 1','green')" style="color:green" id='one'>Title 1</a>
<a onmouseover="onover('Paragraph 2','red')" style="color:red">Title 2</a>
</br>
<div id="text" style="color:green">Paragraph 1</div>
<script type="text/javascript">
function onover(caption, objId, obj)
{
document.getElementById(objId).innerHTML=caption;
document.getElementById(objId).style.color = obj.style.color;
}
</script>
<a onmouseover="onover('Paragraph 1', 'text', this)" style="color:green">Title 1</a>
<a onmouseover="onover('Paragraph 2', 'text2', this)" style="color:red">Title 2</a>
</br>
<div id="text" style="color:green">Paragraph 1</div>
<div id="text2" style="color:red"></div>
document.getElementById('text2').style.color = 'blue';
would change the color of text.
on a separate note, {document.getElementById('text2').innerHTML=caption;}
is not part of your onover function.
I'd strongly recommend separating style, logic, and content. It makes your code much easier to read maintain. Some recommendations:
Here's an example of how to implement these suggestions:
<style>
.red { color: red; }
.green { color: green; }
</style>
<div id="TitleBar">
<a data-text="Paragraph 1" class="green">Title 1</a>
<a data-text="Paragraph 2" class="red">Title 2</a>
</div>
<div id="text"></div>
<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
$('#TitleBar').on('hover', 'a', function (e) {
var $evTarg = $(e.target),
$dest = $('#text');
$dest.html($evTarg.data('text')).attr('class', $evTarg.attr('class'));
});
</script>
One last comment - if the "Paragraph x" text is more than a couple of words, consider storing the text in a named array instead of embedding it in the source tag.
You'd better do that via CSS. No programing needed at all.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.