Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts

    blinking problem with onMouseOver

    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!

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by ikilledsanta View Post
    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.

    Edit: btw, you can use firebug extension fo rfirefox to debug

    regards
    Last edited by oesxyl; 01-20-2009 at 12:45 AM.

  • #3
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by oesxyl View Post
    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 .

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by ikilledsanta View Post
    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.

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

    Edit: or preventDefault() in each function? I don't realy know

    best regards
    Last edited by oesxyl; 01-20-2009 at 01:21 AM.

  • #5
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by ikilledsanta View Post
    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

  • #7
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by oesxyl View Post
    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!

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by ikilledsanta View Post
    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

  • #9
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by leecreative; 01-31-2011 at 03:37 PM. Reason: wrong code

  • #10
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by leecreative View Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •