...

View Full Version : blinking problem with onMouseOver



ikilledsanta
01-20-2009, 12:19 AM
http://www.primedesigning.com/ellis/

I'm working on a site for a friend and I can't figure out what's causing this blinking! Hover over one of the 3 pictures in the "Products" section to see what I'm talking about (the larger, expanded picture and its border blinks on and off).

BTW, this site is still under construction. Any design ideas you guys may have would be appreciated too :)

Thanks for any help!

oesxyl
01-20-2009, 12:34 AM
http://www.primedesigning.com/ellis/

I'm working on a site for a friend and I can't figure out what's causing this blinking! Hover over one of the 3 pictures in the "Products" section to see what I'm talking about (the larger, expanded picture and its border blinks on and off).

BTW, this site is still under construction. Any design ideas you guys may have would be appreciated too :)

Thanks for any help!
javascript problem. Something with functions expandpic and noexpand.

btw, you can use firebug extension fo rfirefox to debug
regards

ikilledsanta
01-20-2009, 01:02 AM
javascript problem. Something with functions expandpic and noexpand.

Yeah I thought it was those 2, but what am I doing wrong in those functions?

I know there is a more preferred way to do rollovers but I used the way I taught myself, its been working until now :(.

oesxyl
01-20-2009, 01:15 AM
Yeah I thought it was those 2, but what am I doing wrong in those functions?

I know there is a more preferred way to do rollovers but I used the way I taught myself, its been working until now :(.
I guess is something about events propagation in js. probably after onmouseover you must stop the event to fire noexpand somehow. I don't see in your code how noexpand is fired, must be onmouseout probably. If is onmouseover too, that's wrong.
I don't realy know what's wrong I just guessing, :)
Probably somebody in javascript forum could give an clear answer.

noexpand seems to be onmouseout( firebug). Try to use, not sure how, stopPropagation()/cancelBubble:
http://www.javascriptkit.com/jsref/event.shtml

or preventDefault() in each function? I don't realy know
best regards

ikilledsanta
01-20-2009, 02:12 AM
I've figured it out. Because the expanding box that pops up is on a higher z-index than the picture that contains the onMouseOver function, when the expanding box displays due to expandpic() which is in the onMouseOver, the page automatically thinks that the mouse is no longer hovering over the lower (non-expanded) image, which triggers the noexpand() function in the onMouseOut.

I fixed it by putting the onMouseOut "noexpand()" function in the expanding box. I'm gonna have to include an image map to make it work how I wanted but this is good.

Thanks for the help! Hey what did you think about my site? Unique, no?

oesxyl
01-20-2009, 02:36 AM
I've figured it out. Because the expanding box that pops up is on a higher z-index than the picture that contains the onMouseOver function, when the expanding box displays due to expandpic() which is in the onMouseOver, the page automatically thinks that the mouse is no longer hovering over the lower (non-expanded) image, which triggers the noexpand() function in the onMouseOut.

I fixed it by putting the onMouseOut "noexpand()" function in the expanding box. I'm gonna have to include an image map to make it work how I wanted but this is good.
yes, it works. :) I'm glad you fix it, :)


Thanks for the help! Hey what did you think about my site? Unique, no?
I can't say that is on my taste, :) I like the content, what is and what I guess will be, seems interesting.

best regards

ikilledsanta
01-20-2009, 02:51 AM
yes, it works. :) I'm glad you fix it, :)


I can't say that is on my taste, :) I like the content, what is and what I guess will be, seems interesting.

best regards

Once done, the site will be selling electronics. This is one of the most complex sites I've ever made in terms of design.

I'm pretty impressed with what I've made so far...don't forget that I have no professional experience or education in this field...everything I know is self-taught, that's why my site isn't exactly top notch.

Just wondering, were you looking at the site in 1024x768 resolution? It may get blurry/out of place at different resolutions, I haven't really looked. This site is in the beginning stages, I do cross-browser/resolution checks later.

And I know the logo is terrible, I'm just using it for a placeholder right now.

Thanks for the input!

oesxyl
01-20-2009, 03:19 AM
Once done, the site will be selling electronics. This is one of the most complex sites I've ever made in terms of design.
how much you sell depend on how much visitors you have( I talk only about online part of your bussines), so if you can convince 5% of yours visitors to be your clients you will have 5 clients for 100 visitors but 50 clients for 1000. :)


I'm pretty impressed with what I've made so far...don't forget that I have no professional experience or education in this field...everything I know is self-taught, that's why my site isn't exactly top notch.
I guess this when I see the site and you are right is impessive, you can be proud of what you did, but that don't means that you can improve yourself, :). That's of course if you consider that you need. I don't say to change your profession just to have a fancy site, :)
And you don't need to do all by your own. You can ask for a review in the site review forum, and for advice, or look for prefossional help for some parts.
For example I'm not good with graphics and if I want a better logo, as you say you want, I prefere to ask somebody to do it for me, :)


Just wondering, were you looking at the site in 1024x768 resolution? It may get blurry/out of place at different resolutions, I haven't really looked. This site is in the beginning stages, I do cross-browser/resolution checks later.

And I know the logo is terrible, I'm just using it for a placeholder right now.
that's simple, :) use this:

http://browsershots.org/


Thanks for the input!
I hope I help you, and I'm realy glad if I succed, :)

best regards

leecreative
01-31-2011, 03:24 PM
Hi,
I am trying to show the images by hovering the title of the related content but I am getting blinking problem with onMouseOver on the title.

Please find the my javaScript function as below:

<script type="text/javascript">
function showIt(imgsrc)
{
document.getElementById('imageshow').style.display='block';
document.getElementById('imageshow').src=imgsrc;


}

function hideIt(imgsrc)
{
//document.getElementById('imageshow').src="default.jpg";
document.getElementById('imageshow').style.display='none';

}


</script>
<div style="float: right;">
<img src="default.jpg" id="imageshow">

<?php
$result = mysql_query("SELECT `id`, `date`, `title`, `summary` FROM `latestnewsarticle` WHERE `live` = '1' ORDER BY `date` DESC LIMIT 0, 5;");
$rowCount = mysql_num_rows($result);

for ($i=0; $i<$rowCount; $i++)
{
list($articleid, $date, $title, $summary) = mysql_fetch_row($result);
$datebits = explode("-",$date);
$datestring = date("jS F", mktime(0, 0, 0, $datebits[1], $datebits[2],
$datebits[0]));

$type = array('jpg','jpeg','png','gif');

foreach($type as $key =>$ex)
{
if (is_file("images/content/news/". $articleid . ".".$ex))
{
$filename ="images/content/news/". $articleid . ".".$ex;
break;

}
}

echo "<h3>$datestring - <a href=\"latestnews.php?id=$articleid\"onmouseover=\"showIt('$filename')\" onmouseout=\"hideIt()>".dbclean($title)."</a>
<a class=\"readmore\" href=\"latestnews.php?id=$articleid\">...READ MORE</a></h3><br>
<div class=\"clear\"></div>";
}
?>
</div>

Thanking in advanced.

oesxyl
01-31-2011, 03:27 PM
Hi,
I am trying to show the images by hovering the title of the related content but I am getting blinking problem with onMouseOver on the title.

Please find the my javaScript function as below:

<script type="text/javascript">
function showIt(imgsrc)
{
document.getElementById('imageshow').style.display='block';
document.getElementById('imageshow').src=imgsrc;


}

function hideIt(imgsrc)
{
//document.getElementById('imageshow').src="default.jpg";
document.getElementById('imageshow').style.display='none';

}


</script>
<div style="float: right;">
<img src="default.jpg" id="imageshow">

<?php
$result = mysql_query("SELECT `id`, `date`, `title`, `summary` FROM `latestnewsarticle` WHERE `live` = '1' ORDER BY `date` DESC LIMIT 0, 5;");
$rowCount = mysql_num_rows($result);

for ($i=0; $i<$rowCount; $i++)
{
list($articleid, $date, $title, $summary) = mysql_fetch_row($result);
$datebits = explode("-",$date);
$datestring = date("jS F", mktime(0, 0, 0, $datebits[1], $datebits[2],
$datebits[0]));

$type = array('jpg','jpeg','png','gif');

foreach($type as $key =>$ex)
{
if (is_file("images/content/news/". $articleid . ".".$ex))
{
$filename ="images/content/news/". $articleid . ".".$ex;
break;

}
}

echo "<h3>$datestring - <a href=\"latestnews.php?id=$articleid\"onmouseover=\"showIt('$filename')\" onmouseout=\"hideIt(''>".dbclean($title)."</a>
<a class=\"readmore\" href=\"latestnews.php?id=$articleid\">...READ MORE</a></h3><br>
<div class=\"clear\"></div>";
}
?>
</div>

Thanking in advanced.
usualy is better to start your own thread but if you still prefere old posts there are posts older then 2009, you only need to search.

best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum