Developer Network >> Java Programming >> Java Programming

Help with a code?

Okay, I was wondering if there was a way that you could create a code kind of like image rollover but kind of different. I want an image to be placed on my site then when a mouse is hovered over the image, it will change and there will be a textarea where people can copy a code. Can that be done?

Thanks!

[316 byte] By [Cool21] at [2007-11-19 23:53:21]

«« PROCESSENTRY32 problem
»» Baseclass constructor

# 1 Re: Help with a code?

Hi,

First off, this is the wrong forum, you want to post this question in the client side scripting forum, they might be able to help you better with your problem.

Yes it can be done, have an image in one layer/DIV and the textarea in another, when you move your mouse over the one layer, hide it and show the other, and when you move your mouse out hide the showing layer and show the other. This can be done using styles.

Bnt at 2007-11-10 2:18:54 >

# 2 Re: Help with a code?

Okay, thanks for your help. I will use that forum next time.

Do you think that you could show an example code? I don't quite get what you mean by hide it and all. sorry if it is too much trouble.

Cool21 at 2007-11-10 2:19:54 >

# 3 Re: Help with a code?

No trouble at all:

<html>
...

<script language="javascript">
function show(bShow){
var objPic, objText;

objPic = document.getElementById("picDiv");
objText = document.getElementById("textDiv");

if(bShow){
objPic.style.display = "none";
objText.style.display = "";
}else{
objPic.style.display = "";
objText.style.display = "none";
}
}
</script>

<body>
<div id="picDiv" onmouseover="javascript: show(true)"></div>
<div id="textDiv" onmouseover="javascript: show(false)"></div>
</body>
</html>

I haven't tested this, so some things might not work and there may be errors, but it is a way you can do it. You might have to debug my code though.

As I said earlier though this is a java forum not a javascript forum, so you might get better solutions from the people in the scripting forum as they have more experience doing this kind of stuff.

Hope This Helps, let me know if you have any more problems

Bnt at 2007-11-10 2:21:04 >

# 4 Re: Help with a code?

okay, I got the code put on my site and it won't show up. any ideas?

Cool21 at 2007-11-10 2:22:03 >

# 5 Re: Help with a code?

Sorry, add this to the div elements

<div id="picDiv" style="display:" onmouseover="javascript: show(true)"></div>
<div id="textDiv" style="display:none" onmouseover="javascript: show(false)"></div>

What doesn't show?

Bnt at 2007-11-10 2:23:02 >

# 6 Re: Help with a code?

the image doesn't show...nothing is there where I placed the code.

Cool21 at 2007-11-10 2:24:05 >

# 7 Re: Help with a code?

What does your code look like?

Bnt at 2007-11-10 2:25:09 >

# 8 Re: Help with a code?

<script language="javascript">
function show(bShow){
var objPic, objText;

objPic = document.getElementById("picDiv");
objText = document.getElementById("textDiv");

if(bShow){
objPic.style.display = "none";
objText.style.display = "";
}else{
objPic.style.display = "";
objText.style.display = "none";
}
}
</script>

<div id="picDiv" style="display:" onmouseover="javascript: show(true)"></div>
<div id="textDiv" style="display:none" onmouseover="javascript: show(false)"></div>
</body>

Cool21 at 2007-11-10 2:26:01 >

# 9 Re: Help with a code?

should be

<img src=" http://www.kellyforums.com/topsites/img/kcfblankbutton2.png>

Take a closer look, you left and the textarea the image commented out.

Bnt at 2007-11-10 2:27:03 >

# 10 Re: Help with a code?

okay, I did what you said and it still doesn't show up. here is the code I placed:

<script language="javascript">
function show(bShow){
var objPic, objText;

objPic = document.getElementById("picDiv");
objText = document.getElementById("textDiv");

if(bShow){
objPic.style.display = "none";
objText.style.display = "";
}else{
objPic.style.display = "";
objText.style.display = "none";
}
}
</script>

<div id="picDiv" style="display:" onmouseover="javascript: show(true)"><http://www.kellyforums.com/topsites/img/kcfblankbutton2.png></div>
<div id="textDiv" style="display:none" onmouseover="javascript: show(false)"><kellyforums.com></div>
</body>

Cool21 at 2007-11-10 2:28:04 >

# 11 Re: Help with a code?

You can't just add an image to an HTML document by giving a url, it's just not going to work. The sames goes for the text area:

<http://www.kellyforums.com/topsites/img/kcfblankbutton2.png>
AND
<kellyforums.com>

means nothing to a browser.

<img src="http://www.kellyforums.com/topsites/img/kcfblankbutton2.png">
AND
<textarea name="">Text to be displyed here</textarea>

Maybe you should read some HTML tutorials first?

Bnt at 2007-11-10 2:29:03 >

# 12 Re: Help with a code?

Here is a good place to start:

http://www.w3schools.com/

Bnt at 2007-11-10 2:30:06 >

Java Programming