CSS & ColdFusion, replacing DIV content

[TheScarecrow]

Ok I have a DIV that on rollover of an object it changes position to the mouse pointer. However, I also want it to replace the content of the DIV tag with ColdFusion code. Something like this:

<cfoutput><img src="../#staffmember.imageName[3]#" align="middle"><span class="style1">
#staffmember.wName[3]# </span> </cfoutput>

Does anyone know how to do this? Thanks.
(current link code):

<a
onmouseover="ShowContent('magnify'); return true;"
onmouseout="HideContent('magnify'); return true;"
href="java script:ShowContent('magnify')">
IMAGE
</a>

[WolfShade]

You didn't include the DIV, itself (unless you're referring to the anchor). But you can use the name of the DIV and innerHTML to change the content.

<div id="thisDiv">
nbsp;
</div>
<cfoutput>
<script language="javascript">
function whatever() {
thisDiv = getElementById('thisDiv');
thisDiv.innerHTML = " #content variable name#";
}
</script>
</cfoutput>

^_^

[TheScarecrow]

Here would be my new code but it doesnt work. Did i do something wrong?
<cfoutput>
<script language="javascript">
function changeContent() {
magnify = getElementById('magnify');
magnify.innerHTML = " <img src="../#staffmember.imageName[3]#" align="middle"><span class="normalText">
#staffmember.wName[3]# </span>";
}
</script>
</cfoutput>

DIV

<div id="magnify" style="display:none;
position:absolute;
border-style: solid;
background-color: white;
padding: 5px;"><cfoutput><img src="../#staffmember.imageName[2]#" align="middle"><span class="normalText">
#staffmember.wName[2]# </span> </cfoutput> </div>

[WolfShade]

In the javascript, the line that says:
magnify = getElementById('magnify');

Should read:
magnify = document.getElementById('magnify');

^_^

[TheScarecrow]

Strange still doesnt work. Here is updated code.
<cfoutput>
<script language="javascript">
function changeContent() {
magnify = document.getElementById('magnify');
magnify.innerHTML = "<img src="../#staffmember.imageName[3]#" align="middle"><span class="normalText">
#staffmember.wName[3]# </span>";
}
</script>
</cfoutput>

DIV tag
<cfoutput><div id="magnify"><img src="../#staffmember.imageName[2]#" align="middle"><span class="normalText">
#staffmember.wName[2]# </span> </div></cfoutput>
I have other Javascript on the page is that a problem??

[WolfShade]

Is the javascript on the same page as the CF code? Or is it in a separate .js file?

If it's a separate .js file, copy the <script></script> into the same page as the CF page.

That's the only thing I can think of. What isn't working? How is it not working? I need some more specifics. JS error messages?

^_^

[TheScarecrow]

The javascript is on the same page. it doesnt change the picture or the text in the div on the rollover. The code for the for the rollover is this:
<a
onmouseover="ShowContent('magnify'); return true; changeContent();"
onmouseout="HideContent('magnify'); return true;"
onClick="HideContent('magnify');"
href="staffmember.cfm?EmployeeID=2"><img src="../staff_pictures/thumb/tn_mckee.jpg" width="43" height="60" border="0"></a>

[TheScarecrow]

ok if I have say seven pictures and I want the content of the DIV tag to change differently with each of the pictures. So I guess the code would be something like this.
Button Code:
<a
onmouseover="ShowContent('magnify'); return true; changeContent(2);"
onmouseout="HideContent('magnify'); return true;"
onClick="HideContent('magnify');"
href="staffmember.cfm?EmployeeID=2"><img src="../staff_pictures/thumb/tn_mckee.jpg" width="43" height="60" border="0"></a>

The Javascript would be:
<cfoutput>
<script language="javascript">
function changeContent(i) {
magnify = document.getElementById('magnify');
magnify.innerHTML = "<img src="../#staffmember.imageName #" align="middle"><span class="normalText">
#staffmember.wName# </span>";
}
</script>
</cfoutput>

The DIV tag would be:
<cfoutput><div id="magnify"><img src="../#staffmember.imageName[2]#" align="middle"><span class="normalText">
#staffmember.wName[2]# </span> </div></cfoutput>

unfortunately the i is not defined. I am not sure that I can do this without Ajax or doing individual layers for each picture. That do you think?