JavaScript - Imageslider With Mouseover Text

I searched long and hard for an example of how to do this but couldn't find anything similar, even after searching a good number of other forums.

Below is a script I have that displays a list of summary info for multiple people. When you mouse over some ones summary info, a bio appears below that summary info (pushing everything below it down). What I'd like to do is take it further and allow more layers. For example, when you hover over their bio, more info about them pops up below that, and so on.

I know you're probably tired of seeing mousevent/text questions but I'm desperate at this point. If some one could just add a mouseover event to the bio section that displayed more text below it would suffice and I could take it from there.

Heres the code:
Code:

<p>
<script type="text/javascript">
    var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
            this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
            this.OS = this.searchString(this.dataOS) || "an unknown OS";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                var dataProp = data[i].prop;
                this.versionSearchString = data[i].versionSearch || data[i].identity;
                if (dataString) {
                    if (dataString.indexOf(data[i].subString) != -1)
                        return data[i].identity;
                }
                else if (dataProp)
                    return data[i].identity;
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index == -1) return;
            return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
        },
        dataBrowser: [
		{
		    string: navigator.userAgent,
		    subString: "Chrome",
		    identity: "Chrome"
		},
		{ string: navigator.userAgent,
		    subString: "OmniWeb",
		    versionSearch: "OmniWeb/",
		    identity: "OmniWeb"
		},
		{
		    string: navigator.vendor,
		    subString: "Apple",
		    identity: "Safari",
		    versionSearch: "Version"
		},
		{
		    prop: window.opera,
		    identity: "Opera"
		},
		{
		    string: navigator.vendor,
		    subString: "iCab",
		    identity: "iCab"
		},
		{
		    string: navigator.vendor,
		    subString: "KDE",
		    identity: "Konqueror"
		},
		{
		    string: navigator.userAgent,
		    subString: "Firefox",
		    identity: "Firefox"
		},
		{
		    string: navigator.vendor,
		    subString: "Camino",
		    identity: "Camino"
		},
		{		// for newer Netscapes (6+)
		    string: navigator.userAgent,
		    subString: "Netscape",
		    identity: "Netscape"
		},
		{
		    string: navigator.userAgent,
		    subString: "MSIE",
		    identity: "Explorer",
		    versionSearch: "MSIE"
		},
		{
		    string: navigator.userAgent,
		    subString: "Gecko",
		    identity: "Mozilla",
		    versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
		    string: navigator.userAgent,
		    subString: "Mozilla",
		    identity: "Netscape",
		    versionSearch: "Mozilla"
		}
	],
        dataOS: [
		{
		    string: navigator.platform,
		    subString: "Win",
		    identity: "Windows"
		},
		{
		    string: navigator.platform,
		    subString: "Mac",
		    identity: "Mac"
		},
		{
		    string: navigator.userAgent,
		    subString: "iPhone",
		    identity: "iPhone/iPod"
		},
		{
		    string: navigator.platform,
		    subString: "Linux",
		    identity: "Linux"
		}
	]

    };
    BrowserDetect.init();
    //Declaring Variables to be used later
    var staff_members = -1;
    var max_staff_members = 9;
    var staff_name_array = new Array(); //Array of strings
    var staff_title_array = new Array(); //Array of strings
    var staff_length_array = new Array(); //Array of strings
    var staff_info_array = new Array(); //Array of strings
    var staff_array = new Array(); //Array of strings
    var staff_id_array = new Array(); //Array of answer IDs
    var image_source_array = new Array(); //Array of full html code, for images
    var staff_start = new Array(); //Array of starting pos for staff bios
    var staff_end = new Array(); //Array of ending pos for staff bios
    var start_span = '<span style="font-size: 12px;">';
    var end_span = '</span>';
    var img_start_str = "<img alt=";
    var img_end_str = '">'; //"border-style: solid;";//Followed by " />
    var img_end_str_len = 3; //24;

    function init() {
        remove_staff_tag();
  
        for (i = 0; i < staff_members; i++) {
            staff_name_array[i] = ""
         
        }
   
        for (i = 0; i < staff_members; i++) {
            staff_title_array[i] = ""
         
        }
    
        for (i = 0; i < staff_members; i++) {
            staff_length_array[i] = ""
        
        }

        for (i = 0; i < staff_members; i++) {
            staff_info_array[i] = pull_bio(i) 
           
        }

        for (i = 0; i < staff_members; i++) {
            staff_array[i] = start_span + staff_name_array[i] + //"<br/> " +
				staff_title_array[i] + //"<br/> " +
				staff_length_array[i] + //"<br/> " +
				staff_info_array[i] + end_span; //"<br/> " +
        }

        for (i = 0; i < staff_array.length; i++) {
            staff_id_array[i] = "emp_bio_long_" + (i);
        }
        remove_unused_staff();
    }

    function remove_staff_tag() {
        var ret = document.getElementById("div_tag").innerHTML;

        var ind = ret.indexOf("(max 9):[");
        var text_after_num = ret.substring(ind + 8);

        staff_members = liferay_workaround("," + ret.substring(ind + 9, ind + 10));
        document.getElementById("div_tag").innerHTML = text_after_num.substring(8);
    }

    function remove_unused_staff() {
        var div_html = document.getElementById("div_tag").innerHTML;


       
        for (i = 0; i < max_staff_members; i++) {
            staff_start[i] = div_html.indexOf("emp_bio_short_" + i) - 29;
            staff_end[i] = div_html.indexOf("Bio " + (i + 1) + " End") - 26;
        }
      
        end_pos = staff_end[staff_members - 1];

     
        document.getElementById("div_tag").innerHTML = div_html.substring(0, end_pos);
    }
 
    function pull_bio(emp_num) {
        var ret = document.getElementById("emp_bio_long_" + emp_num).innerHTML;
        var len = ret.length;
        var img_start_pos = ret.indexOf(img_start_str);
        var img_end_pos = ret.indexOf(img_end_str);
        return ret;
    }
   
    function set_all_bios() {
       
        for (i = 0; i < staff_memebrs; i++) {

            staff_info_array[i] = "changed";
        }
    }

    function pull_pic_test(emp_num) {
        var ret = document.getElementById("emp_bio_long_" + emp_num).innerHTML;
        var img_start_pos = ret.indexOf(img_start_str);
        var img_end_pos = ret.indexOf(img_end_str);
        var ret2 = ret.substring(img_start_pos, img_end_pos + img_end_str_len);
        return ret2;
    }

    function get_bio(emp_num) {
        return staff_array[emp_num];
    }
  
    function clear_all_bios() {
        for (i = 0; i < staff_id_array.length; i++) {
            document.getElementById(staff_id_array[i]).innerHTML = '';
        }
    }
    function change_text(id_to_change, value_to_change_to) {
        clear_all_bios();
        document.getElementById(id_to_change).innerHTML = value_to_change_to;
       
    }

    function liferay_workaround(almost_number) {
        var adj = false;
        if (almost_number == ",0") {
            almost_number = 0;
            adj = true;
        }
        if (almost_number == ",1") {
            almost_number = 1;
            adj = true;
        }
        if (almost_number == ",2") {
            almost_number = 2;
            adj = true;
        }
        if (almost_number == ",3") {
            almost_number = 3;
            adj = true;
        }
        if (almost_number == ",4") {
            almost_number = 4;
            adj = true;
        }
        if (almost_number == ",5") {
            almost_number = 5;
            adj = true;
        }
        if (almost_number == ",6") {
            almost_number = 6;
            adj = true;
        }
        if (almost_number == ",7") {
            almost_number = 7;
            adj = true;
        }
        if (almost_number == ",8") {
            almost_number = 8;
            adj = true;
        }
        if (almost_number == ",9") {
            almost_number = 9;
            adj = true;
        }
        if (!adj) {
            almost_number = 1;
        }
        return almost_number;
    }
  
</script></p>
<div class="faq-content" id="div_tag">
	<p id="staff_num">
		Enter number of staff members within the brackets (max 9):[4]</p>
	<p class="emp_bio_short" id="emp_bio_short_0" onmouseout="" onmouseover="change_text('emp_bio_long_0', get_bio(0))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>President &amp; General Manager<br />
		<strong>Length of Time with Company:&nbsp;</strong>18 years</span></p>
	<p class="answer" id="emp_bio_long_0" style="text-align: left;">
		[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets]</span>]</p>
<!---------------------- Bio 1 End --------------------------><!---------------------- Bio 2 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_1" onmouseout="" onmouseover="change_text('emp_bio_long_1', get_bio(1))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
		<strong>Title:&nbsp;</strong>President &amp; General Manager<br />
		<strong>Length of Time with Company:&nbsp;</strong>5 years</span></p>
	<p class="answer" id="emp_bio_long_1" style="text-align: left;">
		&nbsp;[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets]</span>]</p>
<!---------------------- Bio 2 End --------------------------><!----------------------- Bio 3 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_2" onmouseout="" onmouseover="change_text('emp_bio_long_2', get_bio(2))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
		<strong>Title: </strong>President &amp; General Manager<br />
		<strong>Length of Time with Company:&nbsp;</strong>6 years</span></p>
	<p class="answer" id="emp_bio_long_2" style="text-align: left;">
		&nbsp;[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets] </span>]</p>
<!---------------------- Bio 3 End --------------------------><!----------------------- Bio 4 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_3" onmouseout="" onmouseover="change_text('emp_bio_long_3', get_bio(3))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
		<strong>Title: </strong>President &amp; General Manager<br />
		<strong>Length of Time with Company:</strong> 5 years</span></p>
	<p class="answer" id="emp_bio_long_3" style="text-align: left;">
		&nbsp;[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets] </span>]</p>
<!----------------------- Bio 4 End --------------------------><!----------------------- Bio 5 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_4" onmouseout="" onmouseover="change_text('emp_bio_long_4', get_bio(4))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_4" style="text-align: left;">
		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 5 End --------------------------><!----------------------- Bio 6 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_5" onmouseout="" onmouseover="change_text('emp_bio_long_5', get_bio(5))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_5" style="text-align: left;">
		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 6 End --------------------------><!----------------------- Bio 7 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_6" onmouseout="" onmouseover="change_text('emp_bio_long_6', get_bio(6))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_6" style="text-align: left;">
		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
<!---------------------- Bio 7 End --------------------------><!----------------------- Bio 8 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_7" onmouseout="" onmouseover="change_text('emp_bio_long_7', get_bio(7))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_7" style="text-align: left;">
		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 8 End --------------------------><!----------------------- Bio 9 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_8" onmouseout="" onmouseover="change_text('emp_bio_long_8', get_bio(8))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_8" style="text-align: left;">
		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 9 End --------------------------><!---------------------- Bio 10 -------------------------->	<p class="emp_bio_short" id="emp_bio_short_9" onmouseout="" onmouseover="change_text('emp_bio_long_9', get_bio(9))" style="text-align: left;">
		<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
		<strong>Title:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_9" style="text-align: left;">
		&nbsp;[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 10 End --------------------------></div>
<p>
<script type="text/javascript">
    init(); 
    change_text('emp_bio_long_0', get_bio(0))
</script></p>

Im new to this forum and was wondering if anyone would mind helping me out.

Im attempting to modify some code i found here through google to be used to change a welcome screen to 4 different languages besides english.

heres the code

<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.hide {
display:none;
}
.show {
display:inline;
}
</style>

<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',showlinks,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',showlinks);
}
}

function showlinks() {

lis=document.getElementById('nav').getElementsByTagName('li');

for(c=0;c<lis.length;c++){

lis[c].onmouseover=function() {
this.getElementsByTagName('span')[0].className='hide';
this.getElementsByTagName('span')[1].className='show';
}

lis[c].onmouseout=function() {
this.getElementsByTagName('span')[0].className='show';
this.getElementsByTagName('span')[1].className='hide';
}
}
}
</script>

</head>
<body>

<ul id="nav">
<li>
<span>[Closed]</span>
<span class="hide"><a href="http://www.codingforums.com/">codingforums.com</a></span>
</li><li>
<span>[Closed]</span>
<span class="hide"><a href="http://www.google.com/">google.com</a></span>
</li><li>
<span>[Closed]</span>
<span class="hide"><a href="http://www.bbc.co.uk/">bbc.co.uk</a></span>
</li><li>
<span>[Closed]</span>
<span class="hide"><a href="http://w3c.org/">w3c.org</a></span>
</li>
</ul>

</body>
</html>
</code>

As far as i can tell, if i just add the correct number of span id's it should work, or is there a different code i must plug in to get it to switch to the different languages.

Hello,
I'm trying to put a site together and this time I'm going for an interactive feel.

Code:

<p id="status">[Closed]</p>

Thats the html of it. What i'm trying to accomplish is when the mouse goes onto the <p>, the [Closed] then turns into

Code:

<a href="index.php">Open</a>

but I can't get this figured. Could someone help me?

Thnx!

I currently have an image and underneath it there are 6 thumbnails. When I run the cursor over them the big image changes. This works fine. However, I would like to have text beside the big picture that also changes depending on the thumbnail over which I am hovering.

I have tried to work it out myself but failed miserably. I have tried forums, but can't find what I need. My code as it stands at the moment is:

<script type="text/javascript">
if (document.images) {image0 = new Image;
image0.src = "i/p0.png";
image1 = new Image;
image1.src = "i/p1.png";
image2 = new Image;
image2.src = "i/p2.png";
image3 = new Image;
image3.src = "i/p3.png";
image4 = new Image;
image4.src = "i/p4.png";
image5 = new Image;
image5.src = "i/p5.png";
image6 = new Image;
image6.src = "i/p6.png";
}</script>

and

<img class="img" src="i/p0.png" align="left" width="300" name="rollimg" title='blah' alt="blah"/>
<span class="inverse-text"><this is where I want changing text to appear as I roll over thumbnails.</span>
<br clear="all"/>

<span onmouseover="document.rollimg.src=image0.src;"><img src="i/tb/t0.jpg" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image1.src;"><img src="i/tb/t1.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image2.src;"><img src="i/tb/t2.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image3.src;"><img src="i/tb/t3.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image4.src;"><img src="i/tb/t4.gif" class="img" width="70" alt="blah" title="blah"/>

<span onmouseover="document.rollimg.src=image5.src;"><img src="i/tb/t5.gif" class="img" width="70" alt="blah" title="blah"/>

<span onmouseover="document.rollimg.src=image6.src;"><img src="i/tb/t6.gif" class="img" width="70" alt="blah" title="blah"/>

Ideally if you could tell me how to update the above script and code, so that it works, I would be very grateful.

Hi everyone. I'm brand new to this forum and in need of some help. If you've got a free minute and are interested in helping the clueless I've got one for you. I'm trying to form a script and the appropriate calls to fade-in some text on the event of an image mouseover. Here is what I'm working with:

Code:

<html>

<head>

<script type="text/javascript">
function setOpacity(level) {
element.style.opacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
var duration = 1000;
var steps = 20;
var delay = 5000;
function fadeIn() {
for (i = 0; i <= 1; i += (1 / steps)) {
setOpacity(" + i + "), i * duration;
}
}
</script>

</head>

<body>

<p id="text" style="filter:alpha(opacity=0);opacity:0.5">
This is the text.
</p>

<img name="image" src="pic.jpg" onmouseover="javascript:fadeIn(document.getElementById('text'))" />

</body>

</html>

I know there are problems with this. It looks wonky to me and I don't even know what I'm doing. It's a mashup of some code I found somewhere and my own bad guesses at how to fill in the gaps. Any tips on how I can bring this together? Thanks so much for reading this far. I appreciate your time.