Javascript request

[lguerra]

This is my first post so I apologize if this is not the right forum for this but I would like to have a script made which I'm hoping somebody here can do. What I would like is to be able to include "hidden messages" on my site which can only be seen by highlighting them by making the text color the same as the background.

Example:

Highlight this: This is a secret message.

I know that I can do this without script (as I did above), but I want to be able to have a different secret message inserted each time the page is refreshed. That is where the script comes in. If possible, I'd like to have the script recognize the background color and match the text to it automatically, but if that is too complicated, it would be easy enough to leave the the text color as a variable and match it to the background color manually.

I would also like to have the ability to include an image (such as an arrow) on each side of the hidden message so that I can have something like, "Highlight the area between the two arrows below to reveal a hidden message" as instructions for revealing the hidden messages.

One more thing, I need this script to work without having to add anything to the head of the page because the website building program I use does not allow me to add anything to the head at all. Therefore it has to work within the body of the page only. Thanks!

[Philip M]

Are the secret messages randomly selected, or are they supposed to be sequential?

There are several ways of doing this. I hope this example meets your needs. The selection of the random message depends on whether it is random (as shown) or sequential, in which case a cookie is required to keep count.

<p>Mouseover between the arrows to reveal the secret message</p>
<img src = "rightArrow.gif"><span id = "sm"  style="color: #FFFFFF" onmouseover = "reveal()" onmouseout = "hideIt()"></span><img src = leftArrow.gif">

<script type = "text/javascript">

var messages = new Array();
messages[0] = "FIRST SECRET MESSAGE";
messages[1] = "SECOND SECRET MESSAGE";
messages[2] = "THIRD SECRET MESSAGE";
messages[3] = "FOURTH SECRET MESSAGE";
messages[4] = "FIFTH SECRET MESSAGE";

var randy = Math.floor(Math.random() * messages.length);
document.getElementById("sm").innerHTML = messages[randy];

function reveal() {
document.getElementById("sm").style.color="#FF0000";
}

function hideIt() {
document.getElementById("sm").style.color="#FFFFFF";
}
</script>

“The old believe everything; the middle aged suspect everything; the young know everything.”
Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)

[lguerra]

Thanks for the script! The mouseover effect is not exactly what I wanted, but I was able to remove that from the script and get it to do exactly what I wanted. That was to insert one of several random messages, which are not visible until they are highlighted (because they are the same color as the background), into a webpage. I do like having the option of using the mouseover effect later on if I decide to so I really got a bonus!

I do have one question however. Can I make the font size of the messages larger? If I can, how?

[Philip M]

Originally Posted by lguerra

I do have one question however. Can I make the font size of the messages larger? If I can, how?

Well, yes, of course. Just use normal CSS. e.g.

style="color: #FFFFFF; font-size:20pt"

[lguerra]

Thanks again. I do know some HTML but I know very little about CSS so I wasn't sure how to do that. I'll give it a try.