Hi,

I am working on this site: www.midbrook.com Right in the middle of the page there are 5 pictures (which are list items each with a unique class which controls what picture shows up). Just below I want to put a space (div) for dynamically changing text based on which item is being hovered over. (see attached picture) Can I do this with CSS alone? Whether yes or no, what method do you recommend? All advice welcome and appreciated!

Thanks!

You will need some javascript to help you do this. I don't think it's possible with css alone.

I am not a javascript guru, so I hesitate to show this to you....but it might be helpful, so I will. I had to do something like this for a project once and here is the code that I made to do this:

Javascript:

function menu_rollover_on(explanation){
		document.getElementById('explanation_paragraph').innerHTML = explanation;
		document.getElementById('menu_explanation').style.display = "block";
		}
		
	function menu_rollover_off(){
		document.getElementById('explanation_paragraph').innerHTML = "";
		document.getElementById('menu_explanation').style.display = "none";
		}

snippet of the html:

<div id="menu_box">
       	<ul>
        	<li>
                    <a href="weekly.cfm" onmouseover="menu_rollover_on('See a preview of this weeks ad here.');" onmouseout="menu_rollover_off()">Entire Ad</a>
                </li>

                <li>
                    <a href="zoom_pan.cfm" target="_blank" onmouseover="menu_rollover_on('This option allows you to zoom into this week’s ad or drag it from side to side as needed.');" onmouseout="menu_rollover_off()">Zoom &amp; Pan</a>
                </li>
       </ul>
       
</div>

<div id="menu_explanation">
    <p id="explanation_paragraph"></p>
</div>

I will give that method a try. In terms of SEO and cross-browser compatibility are there any drawbacks of using this method?