Home/ Questions/Q 8258095
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T02:25:11+00:00

Lets try something more simple. I have a pink box and I want it

  • 0

Lets try something more simple. I have a pink box and I want it to turn from pink to red when the user mouseovers it. This function is not working. Can anyone help me fix the code or find the error?? They have told me if I can’t get this working I am going to be let go!!

<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>

<style type="text/css"> 
#input
{
margin-top:-200px;

}
</style>

</head>

<body style="background-color:black";>



<div id="draw-here-raphael" style="height: 400px; width: 400px; background: #666; z-index:0;">
</div>

<div id="input" style="z-index:99;" >
  <input type="text" value="0"; style="text-align:right;" /><br />
</form> 
  </div>

<script type="text/javascript">
//all your javascript goes here
$(function() {
var r = new Raphael("draw-here-raphael"),

    // Store where the box is
    position = 'left',

    // Make our pink rectangle
    rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
    $("rect").(function(i) {
        $("rect").mouseover(function() {
            $("rect").attr({"fill": "red"});
        });
    }); 
});

</script>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try changing the $("rect") to just rect

    rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
rect.(function(i) {
    rect.mouseover(function() {
        rect.attr({"fill": "red"});
    });
});

    However as someone pointed out in a comment it may not work with SVG.

    If you have the rect as a div with height and width, fixed position with left and top and a background-color you can just change the css value of background-color on mouseover.

    For a div example:

    Suppose you have a div with id="pinkBox"

    $('#pinkBox').mouseover(function() {
    $(this).css('background-color','#ff0000');
});

    You will need to position the div too, I’m not sure how the Raphael stuff works, never looked at it personally, but if its fixed positioning then you can emulate this in css with position:fixed; top: some value; left: some value; width: some value; height: some value

    Full code:

    HTML:

    <div id="pinkBox" style="position:fixed; left:20, top:20; width:250; height:300" ></div>

    Javascript:

    $(document).ready(function() {
    $('#pinkBox').mouseover(function() {
        $(this).css('background-color','#ff0000');
    });
});

    Unfortunately if you are not using CSS3 you will not be able to have rounded corners unless you use images. Using CSS3 though you can add rounded corners by adding the following style to the div

    border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px;

    For simplicity I have added the styles inline on the div, I would suggest making a class though and using the class attribute, keeping your css in a seperate file or in the head of your document.

    • 0