mouseOver, mouseOut, onClick

revolution · 03-30-2008, 05:24 PM

Here's a sample of my code:

Code:

<html>
<head>
<script type="text/javascript">
function mouseOver1()
{
document.rating1.src ="blog/img/star.png";
}
function mouseOut1()
{
document.rating1.src ="blog/img/nostar.png";
}
function onClick1()
{
document.rating.src ="blog/img/1.png";
document.rating1.src ="blog/img/star.png";
}
</script>
</head>
<body bgcolor=ffffff>
<center>
<img border="0" src="blog/img/nostar.png" name="rating1" value="One" id="rating1" width="16" height="16" onmouseover="mouseOver1()" onmouseout="mouseOut1()" onclick="onClick1()" />
<br /><br />
<img border="0" src="blog/img/0.png" name="rating" value="Zero" id="rating">
</center>
</body>
</html>

I want it so that when you call the function mouseOver1() it does like it should and change the image to something, and mouseOut1() do like it should, change it back to the original image. That works fine with the current code and so does the onClick1(), but when you click and then move your mouse off of it, it does the mouseOut1() effect so it defeats the purpose of the onClick1(). How can I do the onClick1() and temporarily disable the mouseOut1()?

~~*bug14*~~ · 03-30-2008, 06:52 PM

You can try mousedown and mouseup.

function onClick1()
{
document.rating.src ="blog/img/1.png";
document.rating1.src ="blog/img/star.png";
document.rating1.onmouseout = function{/*lol*/}
}
function putBackRollOver() {
document.rating1.onmouseout = function{mouseOut1()}
}

<... onmousedown="onClick1()" onmouseup="putBackRollOver()"...>

revolution · 03-30-2008, 08:21 PM

That doesn't help because the mouseOut function still takes effect after the click.

What was with the "function{/*lol*/}"? I don't need a function to go there. Actually, I probably do, but the one I'd need there is the one I'm asking for because I don't know how to do it.

I'm thinking what I need is to use an If Else statement. I can think of how to do it, but don't know the proper coding. I could do it in VB.NET, but that doesn't much help. Here's about what I need, I'm sure the syntax and such is wrong:

function mouseOver()
{
If (onmousedown=true)
{
onClick()
}
Else
{
mouseOut()
}
}

That seems right, now I just need to do the coding right. Any help? I'll edit if I get it right.

EDIT

Got it. I used an idea from your code bug14. The putBackRollOver function wasn't needed and I didn't use mousedown or mouseup. I used the document.rating1.onmouseout = mouseOut1() and it worked like I wanted it to. Using function {} made nothing work at all.

Anyways, yeah, it's working now, thanks.

EDIT

Nope, still a problem. Say I select 5 stars. They're all selected and it displays "Five Stars" in text as well as showing the 5 star images, but when I select something less afterwards, only the text changes. Also, if I click one, it does like it should and stays changed, but if I mouseover a higher number, they all go back to normal.

~~*bug14*~~ · 04-02-2008, 03:30 PM

Crap! No that was my fault. My dim-witted ass left out the parenthesis

document.rating1.onmouseout = function(){aFunction();}
or
document.rating1.onclick = function(){aFunction();}

to understand that better, it's just like adding <... onclick="aFunction();" ...> to your HTML.

I was just thinking about my reply to this thread, and I was like: I bet I forgot to add parenthesis... sorry for the confusion.

revolution · 04-02-2008, 03:51 PM

Why have it set to a function that just causes another function? Why not just originally set it to that function?

~~*bug14*~~ · 04-02-2008, 04:12 PM

Well you can do

document.rating1.onclick = function() {
document.rating.src ="blog/img/1.png";
document.rating1.src ="blog/img/star.png";
}

and that will make your innerHTML <.. onclick="document.rating.src \=\"blog\/img\/1.png;document.rating1.src \=\"blog\/img\/star.png\";" .. />

It's really the same thing, but I thought it was easier to just put the function as the new onclick, since it already exsisted.

revolution · 04-03-2008, 07:52 PM

Yeah, think if I'm going to do this, I'll do with with VB.NET or flash.

Thanks though.

second2none · 04-03-2008, 09:35 PM

what are you trying to do?The object of this code.... Make a rating system?

revolution · 04-05-2008, 11:50 PM

Quote:

Originally Posted by second2none

what are you trying to do?The object of this code.... Make a rating system?

Yes. I had planned on applying it to a movie wiki I was going to make, but I'm not so sure, at least not for some time.

second2none · 04-06-2008, 12:19 AM

lol just use CSS, HTML, PHP and mySQL.

I have a rating system I made ages ago when I was going to make a video site.

In the database make a table with 3 columns, VideoID, TotalR (Total Rating) & TimeR (times rated)
For a simple one, Then make a simple php page like.

PHP Code:

  <?php
$videoID = "Pron";
$database_user = "user";
$database_pass = "pass";
$database = "Test";
$database_table = "Video";
$rated = $_GET['rating'];
mysql_connect("localhost", $database_user, $database_pass) or die(mysql_error());
mysql_select_db($database) or die(mysql_error());
if(isset($_GET['rating'])){
    if($rated == 1 || $rated == 2 || $rated == 3 || $rated == 4 || $rated == 5){
        $sql = mysql_query("SELECT * FROM '".$database_table."' WHERE videoID = '".$videoID."'") or die(mysql_error());
        $data = mysql_fetch_array($sql);
        $TotalR = $data['TotalR'] + $rated;
        $TimeR = $data['TimeR'] + 1;
        mysql_query("UPDATE '".$database_table."' SET TotalR = '".$TotalR."' WHERE videoID = '".$videoID."'");
        mysql_query("UPDATE '".$database_table."' SET TimeR = '".$TimeR."' WHERE videoID = '".$videoID."'");
        echo "Average Rating For This Video Is ".$TotalR / 5;
        echo "<br> This Video has been rated on ".$TimeR;
    }else{
        echo "Sorry That Rating is not avaiable";
    }
}
else{
    echo "<a href=\"page.php?rating=1\">Rating 1</a>";
    echo "<a href=\"page.php?rating=2\">Rating 2</a>";
    echo "<a href=\"page.php?rating=3\">Rating 3 </a>";
    echo "<a href=\"page.php?rating=4\">Rating 4</a>";
    echo "<a href=\"page.php?rating=5\">Rating 5</a>";
}
?>

That should work I haven't Tested it. Just change the DB details accordingly.
You can Add Pictures etc.
But I don't think you should be writing a video wiki site if you are having trouble with a rating system xD.