How do I hide a picture when loading a page?

I want to load a page.
I want to have a picture that remains hidden until a mouseover action takes
place.

How do I do this?
I'm not sure. : (

Any help would be appreciated.

Thanks.

OM

Jul 20 '05 #1

Subscribe Post Reply

8435

KC Wong

> I want to load a page.

I want to have a picture that remains hidden until a mouseover action takes place.

How do I do this?
I'm not sure. : (

Something like this:

<html>
<head>
<title>Hiding things until mouseover</title>
<script>

</script>
</head>
<body onload="debug()">
<div onmouseover="toggle(true);" onmouseout="toggle(false);">Show
Image</div>
<img name="myImage" src="img.jpg" style="{visibility: hidden;}" />
</body>
</html>

You need to refer to the documentation more often... go to
http://www.w3c.org/
and click menu item HTML and CSS.

Jul 20 '05 #2

Lasse Reichstein Nielsen

"KC Wong" <ev**********@yahoo.com.hk> writes:

I want to load a page. I want to have a picture that remains
hidden until a mouseover action takes place.
<script> Remember the required attribute "type"
<script type="text/javascript">
<!--
You don't need HTML comments in Javascript
function toggle(show) {
if (show) {
document.myImage.style.visibility = "visible";
This is not very protable. Not all browsers make named elements
properties of the document element. You can, portably, use
document.images['myImage'].style.visibility =
(show?"visible":"hidden");
<body onload="debug()">

This is to trigger the Netscape or Mozilla debugger, right? I don't
even think you need to call it, just writing "debug" should be enough.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Jul 20 '05 #3

KC Wong

Thanks, Lasse... I haven't coded any JavaScript for years, but recently
picked it up again because I have to integrate 2 web sites. Seems I've
forgotten most of the good practices :(

- Remember the required attribute "type", <script type="text/javascript">
- document.images['myImage']

I'm off to tidy up my code before they're deployed...

<!--

You don't need HTML comments in Javascript
document.images['myImage'].style.visibility =
(show?"visible":"hidden");

That's one habit I learned from a book many years ago... so that if the
browser does not support JavaScript, your code won't show up on the page.
KC

Jul 20 '05 #4

Lasse Reichstein Nielsen

"KC Wong" <ev**********@yahoo.com.hk> writes:

Thanks, Lasse... I haven't coded any JavaScript for years, but recently
picked it up again because I have to integrate 2 web sites. Seems I've
forgotten most of the good practices :(

Years ago, there were two browsers and almost no standards, so good
practices were often anything that worked. While IE still has a huge
market share, there are other browsers out there. Each is probably
counted only in singe digit percentages, I bet they will grow as more
people start using alternative platforms, e.g., mobile phones with
browsers (where Opera is currently popular with phone makers).

<!--

You don't need HTML comments in Javascript

That's one habit I learned from a book many years ago... so that if the
browser does not support JavaScript, your code won't show up on the page.

Almost correct. If the browser don't understand the script *tag*, it
will show the contents, and you need to hide it with HTML comments. If
it understands the script tag, i.e., understands HTML 3.2, then it
doesn't matter if it can execute the script or not, it still won't
show the contents.

HTML 3.2 was made a recommendation in January 1997, and any serious
browser made after that (and most of the ones made while HTML 3.2 was
in development) will not need the script to be hidden. I think it is
safe to say that no browser in current use needs the HTML comments.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Jul 20 '05 #5

Similar topics

Hide/reveal DHTML

by: ATS | last post by:

I need to hide/reveal parts of a web page using javascript. I think I can do with using the <span> tag, but I've been away from it for a while and don't remember. Any pointers, examples?

Javascript

counting link picture views

by: dave | last post by:

Hello, I've got a situation where a page has a picture on it. This picture is linked to in a newsgroup posting. The owner of the site wants to know how many times the picture is viewed from the...

HTML / CSS

Changing the background picture on a form with code

by: John Ortt | last post by:

Hi there everyone, I have a part info form which has a faded image of our company logo as a background. I want to replace the faded image with a bright red warning image on items which have run...

Microsoft Access / VBA

how to dynamic control some picture's size by Javascript

by: blk.coffee | last post by:

i have some pictures in a page. there are have difference sizes. some of them are too widen for be arrange in a line. so i been tried to adject their sizes to more suitable. i add a event to...

Javascript

saving picture to a user profile!

by: Jeff | last post by:

Hey (and thank you for reading my post) In visual web developer 2005 express edition I've created a simple website project.. At this website I want users who register to be able to upload a...

ASP.NET

Hide HTML page before IE's done loading?

by: Lars Netzel | last post by:

I have a pretty big page that on some sloconnections load about 50% of the page and then before the page has finished loading the rest the user changes a dropdownbox that causes a postback and then...

ASP.NET

How do I hide part of an image with white space?

by: laredotornado | last post by:

Hi, I'm using PHP 5. I was wondering given an image, a.jpg, how can I make an image that would look like you slid a white index card (which I have a file, white.jpg with the same dimensions as...

PHP

Problem with picture

by: zamuel | last post by:

Hey everyone. I have a strange problem with PHP site. This only happens in IE 6. So, when user logs in there is a placeholder for user's own picture. Also there is a form where this picture can...

HTML / CSS

How to hide loading message (displayed with jquery)

by: jmeyer5csc | last post by:

i am using jquery to display a working... div to show the user that the query is doing something. to show.... Sys.Application.add_init(function() { ...

ASP.NET

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing