/    Sign up×
Community /Pin to ProfileBookmark

function show image

Copy linkTweet thisAlerts:
Apr 23.2012

How do I get a function in the head to turn on or show an image in the body area?

I am a struggling noob, but tutorials will not teach me. If I wanted to document.write, or in this case use an alert box, I would not have a question.

I feel I understand the functions below, but these are not real world examples of anything, at least that I would ever use.

I don’t know how to help myself. But I do know, I need to get the part of alert(“Hello”) changed into something somehow the image will act on, see and display after the 3 second delay.

This is the website I got this code from.
[url]http://www.w3schools.com/js/js_timing.asp[/url]

If I can see how to get a function to really do something, would be a big help for me in understanding JS.

This is not a school project, my school doesn’t offer any programming.
I have been at this all day trying to find a tutorial that would help me.

Thanks so much for your help.

<html>
<head>
<script type=”text/javascript”>

function timeMsg()
{
var t=setTimeout(“alertMsg()”,3000);
}
function alertMsg()
{
alert(“Hello”);
}

</script>
</head>

<body”>

<form>
<input type=”button”
value=”show my Image”
onClick=”timeMsg()” />
</form>

<!–
<img src=”myImage.jpg”
width=”100″ height=”100″ /> –>

</body>

</html>

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadApr 23.2012 — Hi there fezzScripts,

and a warm welcome to these forums. ?

Here is a basic "show/hide" script...
[color=navy]&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta name="language" content="english"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;

&lt;title&gt;basic hide and show&lt;/title&gt;

&lt;style type="text/css"&gt;
body {
background-color:#f0f0f0;
}
#mybutton {
float:left;
width:114px;
margin-right:10px;
cursor:pointer;
}
#myimage,#myimage-ns {
padding:4px;
border:1px solid #9cf;
background-color:#fff;
box-shadow:#666 4px 4px 12px;
}
.hide {
display:none;
}
&lt;/style&gt;

&lt;script type="text/javascript"&gt;

function init(){

obj0=document.getElementById('mybutton');
obj1=document.getElementById('myimage');
obj0.className='';

document.getElementById('mybutton').onclick=function() {
obj1.className=='hide'?
(obj1.className='',this.value='hide my Image'):
(obj1.className='hide',this.value='show my Image');
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div&gt;

&lt;input id="mybutton" class="hide" type="button" value="show my Image"&gt;

&lt;img id="myimage" class="hide" src="http://www.coothead.co.uk/images/anim1.gif" alt=""&gt;

&lt;noscript&gt;
&lt;div&gt;&lt;img id="myimage-ns" src="http://www.coothead.co.uk/images/anim1.gif" alt=""&gt;&lt;/div&gt;
&lt;/noscript&gt;

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
[/color]
Those with javascript disabled will just see image but not the button. ?

[i]coothead[/i]
Copy linkTweet thisAlerts:
@fezzScriptsauthorApr 23.2012 — Thanks so much coothead,

A lot of new things for me to learn. You use obj and window and I will be excited to get home to look at and try to learn your code. Some of it I feel I know, and am excited at the new stuff you present me here.

This is wonderful, so many different ways to approach solutions. I really am pleased I have begun to ask questions of the JS guru folks.

I have to go to school now, I will open this tonight, thank you so much.
Copy linkTweet thisAlerts:
@fezzScriptsauthorApr 24.2012 — Hello today coothead,

Thanks to google, I think I understand what your js code is doing. Seeing your ? was a lot of fun to learn about, and something new for me. I had never heard of ternary before and was pleased to read about it.

In my days or weeks ahead, I will try and replace the 2 ternaries with if else, just to see and get practice writing if else your way.

Some quick notes on what I learned about ternary operators.

takes three operands

The syntax is:

condition ? result1 : result2;

if (a > b) { result = x; } else { result = y; }.

I am still learning what to call pieces of JS. I thought everything in a statment or before the ; was an argument or command. Now I have seen the word operand, making me think smaller complete pieces are called operands.

I have a theory that dot syntax is always

object.method.object.method.object.method

window.addEventListener or object.method as in DOM. I think DOM has defferent levels like 0 or 1,2,3. But trying several google terms, I can not find information about DOM levels. I did not save where I first read about a DOM having different levels. Thinking I could find it, I did not save that sentence for my reference study.

I do get the concept of your ternary, but I need further study of what is happening with:

window.addEventListener('load',init,false):

I'm thinking 'load' is about page load or once page is loaded.

, comma is I think a seperator

init is your function

,

false is passed into the init function.

I will be studying this more.

For now I think dot is used in commands.

Comma is used for parameters, like passing into functions.

I have never seen a syntax tutorial yet.

I enjoyed the path your code took me.

I found a few more tutorials I had never seen before,

and they have moved to the top of my tutorial list.

I hope someday, I can write code myself, doing the things I want JS to do. I really enjoy learning JS, I think it's wonderful people can make a web page do things.

Thanks again for your warm welcome to these forums.

And thanks for your wonderful code.
×

Success!

Help @fezzScripts spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 10.12,
social: @webDeveloperHQ,
});

legal: ({
terms: of use,
privacy: policy
analytics: Fullres
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @aldoushuxley,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @linalla,
tipped: article
amount: 1000 SATS,
)...