Integrating PHP and Javascript for Rollover

[Akenatehm]

Hey Guys,

 

I need a bit of help here. I have a little script here running. The javascript part is a rollover that changes the CSS class on hover of the <div> element. The div element and its contents are given from a PHP loop which displays news entries inside the main div.

 

When I hover over any of the news entries, the same one div at the top changes (in its rollover effect). What I want, is a way for each one to change its own, and not eachothers.

 

So it would need to create a new id for each one and work with the javascript somehow.

 

Here's the javascript:

<script type="text/javascript">
function mouseOver()
{
document.getElementById('entry').className = "hoverentry";
}
function mouseOut()
{
document.getElementById('entry').className = "normalentry";
}
</script>

 

and the PHP

<?php
$connect = mysql_connect($host,$user,$pass) or die(mysql_error());
$selectdatabase = mysql_select_db($db) or die(mysql_error());

$getentries = mysql_query("SELECT * FROM newsentries ORDER BY newsid DESC ") or die(mysql_error());

while($filterentries = mysql_fetch_assoc($getentries))
{
$newsid = $filterentries['newsid'];
$title = $filterentries['title'];
$content = substr($filterentries['content'],0,200);
$author = $filterentries['author'];
$date = $filterentries['date'];

echo '<div class="normalentry" id="entry" onMouseOver="mouseOver()" onMouseOut="mouseOut()">';
echo '<h3 class="newsentry">' . "$title  " . "</h3>";
echo '<p class="newsdate">' . "$date"  . "</p> <br />";
echo '<p class="newsentry">' .  "$content" . '......</p>';
echo '<p class="newsposter">Posted By ' . "$author";
?>

 

I have only just started with javascript, that's why I don't know very much.

 

Help would be appreciated.

 

 

[shlumph]

You're assigning all the div's the same ID!!  They need to be different

 

<script type="text/javascript">
function mouseOver(id)
{
document.getElementById('entry'+id).className = "hoverentry";
}
function mouseOut(id)
{
document.getElementById('entry'+id).className = "normalentry";
}
</script>

<?php
$i = 0;
while($filterentries = mysql_fetch_assoc($getentries))
{
$i++
$title = $filterentries['title'];
$content = $filterentries['content'];
$author = $filterentries['author'];
$date = $filterentries['date'];

echo '<div id="entry'+$i+'" class="normalentry" onMouseOver="mouseOver('+$i+')" onMouseOut="mouseOut('+$i+')">';
echo '<h3 class="newsentry">' . "$title  " . "</h3>";
echo '<p class="newsdate">' . "$date"  . "</p> <br />";
echo '<p class="newsentry">' .  "$content" . '</p>';
echo '<p class="newsposter">Posted By ' . "$author" . "</p> </div>";
}

 

But, a better thing to do would be just to handle this in the CSS using pseudo:

div.normalentry{
margin-top: 10px;
margin-bottom: 10px;
background-color: #2a2a2a;
background-image: url('scanline.png');
width:570px;
}

div.normalentry:hover{
margin-top: 10px;
margin-bottom: 10px;
background-color: #111111;
background-image: url('scanline.png');
width:570px;
}

 

And please, try and format your code before posting on here  Other than that, let me know if either of these solutions work for you. The CSS one is the way to go IMHO. Also, remember that ID's on the same page are unique identifiers, and should only be used once on a single page.

 

[Akenatehm]

the CSS way did not work.

 

What is the other way I can do it?

[shlumph]

I give up 

[Akenatehm]

Anybody else then?

[shlumph]

I don't think they gave you a chance 

 

Double post: http://www.phpfreaks.com/forums/index.php/topic,243091.msg1135176.html

(notice quote in my first post)

[Akenatehm]

Anyone else?

 

Btw. This is now a PHP/Javascript related issue not CSS anymore.

[.josh]

 

+ is javascript

. is php

 

 

[Akenatehm]

 

+ is javascript

. is php

 

I don't quite get what you're trying to say to me??

[shlumph]

Perhaps you should go to barnes and nobles, and pick up a book or two, then. 

[.josh]

Detectives usually start their investigation at the crime scene.

[Akenatehm]

Lol thats a good one Crayon.

 

Could you tell me what you meant?

[shlumph]

He meant that you shouldn't go to barnes and nobles, and should figure this out in the code. I, personally, think think otherwise IMHO. 

[.josh]

What do you usually do with a puzzle piece when trying to figure out where it goes?