coding to create and change an image

Question

2.00/5 (1 vote)

See more:

How would I write the code to create a web page called border1.htm that contains an image without a border and when the mouse goes over the image the border for the image is set to 1 which causes a line to appear around the edges of the image and when the mouse leaves the image the border is reassigned back to 0.

Posted 23-Apr-12 5:54am

lorac123

Updated 23-Apr-12 6:16am

Sandeep Mewara

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 23-Apr-12 12:20pm

What is this tag supposed to mean: "encoding". It looks irrelevant. Please put relevant tags. What it is: HTML, JavaScript?
--SA

2 solutions

Solution 1

Using JavaScript you can achieve the same.

Define OnmouseOver and OnMouseOut for the image. In onmouseover, define a JavaScript method that adds a border to the image. In onmouseout, define a JavaScript methof that removes the border and resets it to no border.

Try!

Posted 23-Apr-12 6:17am

Sandeep Mewara

Comments

lorac123 23-Apr-12 12:39pm

I need an example of how to write this...

Sergey Alexandrovich Kryukov 23-Apr-12 12:40pm

No you don't! You need to learn how to write code and implement what you want to show. After all, can you do anything with your own hands?
I gave you a full code sample, please see.
--SA

Sergey Alexandrovich Kryukov 23-Apr-12 12:41pm

My 5. As you can see, I implemented the complete code sample, not sure if it is useful in this case of not.
--SA

Sandeep Mewara 23-Apr-12 13:05pm

Thanks SA.

VJ Reddy 23-Apr-12 12:47pm

Good guidance. 5!

Sandeep Mewara 23-Apr-12 13:05pm

Thanks VJ.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2012-04-23T06:38:00

I would advise to use jQuery for this purpose:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com/[^].

All you need is to handle the event hover which requires two handles: the first function is called when a mouse pointer goes over the image, the second function — when it goes out. For changes in border, you can use the functions .addClass and .removeClass. It will look something like this:

XML

<html>
<head>
    <title>...</title>
        <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
        <style type="text/css"><!--
            img.border { border: solid black thin; }
        --></style>
</head>
<body>

    <img alt="Image" id="image" src = "someImage.png" />

    <script type="text/javascript">
        $(document).ready(function() {
            borderClass = "border";
            imageElement = $("#image"); //element found by its attribute "id"
            imageElement.hover(
                function() { // mouse pointer goes over the imageElement:
                    imageElement.addClass(borderClass);
                },
                function() { // mouse pointer goes out:
                    imageElement.removeClass(borderClass);
                }
            );
        });
    </script>

</body>
</html>

Please see:
http://api.jquery.com/category/events/[^],
http://api.jquery.com/category/css/[^],
http://api.jquery.com/hover/[^],
http://api.jquery.com/addClass/[^],
http://api.jquery.com/removeClass/[^].

Your design has one noticeable flaw: when a border is added, the total size of the element is increased by 2 in each direction, which makes the image jumping by 1 pixel. You can introduce a bit more sophisticated style change to avoid this effect. For example, you can use the border of the same size in both cases, but change its color. This is simple and totally related to CSS, so I would leave this simple task for your home exercise.

—SA