72 users online (1 members and 71 guests)  

Thread: Mouseover pics


Page 1 of 2 1 2 Last
  Results 1 to 15 of 18

Related

  1. pics on comments    Forum: HTML Forum
    Replies: 0
  2. Pics    Forum: HTML Forum
    Replies: 1
  3. Mouseover pics    Forum: HTML Forum
    Replies: 0
  4. hover on links and pics    Forum: HTML Forum
    Replies: 5
  5. Script to allow users to upload pics    Forum: Website Scripts Forum
    Replies: 2
  1. #1
    deadfinger04's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Aug 2004
    Posts
    39

    Mouseover pics

    Ok so im learning mouseovers and whatnot and ive seen some sites that have a mouseover effect but its more creative like, one has a mouseover that goes over the links and a little van appears next to the link. how do u add stuff like this?

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there deadfinger04,

    try this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Mouseover Van Links</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    
    a {
         font-family:arial;
         font-size:16px;
         color:#000000;
     }
    .foo {
         visibility:hidden;
     }
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    function van(id) {
         document.getElementById(id).style.visibility="visible";
    document.onmouseout=function() {
          document.getElementById(id).style.visibility="hidden";
      }
     }
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <div>  
    <a href="#" onmouseover="van('one')">This is a van link</a>
    <span class="foo" id="one"><img src="http://mysite.wanadoo-members.co.uk/achelous/van.gif" alt="van"/></span><br />
    <a href="#" onmouseover="van('two')"> This is a van link </a>
    <span class="foo" id="two"><img src="http://mysite.wanadoo-members.co.uk/achelous/van.gif" alt="van"/></span><br />
    <a href="#" onmouseover="van('three')">This is a van link</a>
    <span class="foo" id="three"><img src="http://mysite.wanadoo-members.co.uk/achelous/van.gif" alt="van"/></span>
    </div>
    
    </body>
    </html>
    coothead

  3. #3
    deadfinger04's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Aug 2004
    Posts
    39
    sweeet thanx a lot man! i didnt mean to have a van on the mouseovers but thanx! now i can add or delete to my liking im learning Javascript right now so soon ill be able to do this kinda stuff by scratch! woot

  4. #4
    deadfinger04's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Aug 2004
    Posts
    39
    man i love how PS does mouseovers and generates the code for u, saves lots of time

  5. #5
    funniboi's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2004
    Posts
    1
    Hey I need a scroll box like this one but I cant find the code .If anybody has a code plz post it here thanks!

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there funniboi,

    and a warm welcome to these forums

    Try this....
    Code:
    
    
    
    <head>
    
    <style type="text/css">
    <!--
    textarea {
         width:490px;
         height:490px;
     }
    //-->
    </style>
     
    </head>
    <body>
        
    <form action="">
    <textarea wrap="off">
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Mouseover Van Links</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    
    a {
         font-family:arial;
         font-size:16px;
         color:#000000;
     }
    .foo {
         visibility:hidden;
     }
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    function van(id) {
         document.getElementById(id).style.visibility="visible";
    document.onmouseout=function() {
          document.getElementById(id).style.visibility="hidden";
      }
     }
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <div>  
    <a href="#" onmouseover="van('one')">This is a van link</a>
    <span class="foo" id="one"><img src="http://mysite.wanadoo-members.co.uk/achelous/van.gif" alt="van"/></span><br />
    <a href="#" onmouseover="van('two')"> This is a van link </a>
    <span class="foo" id="two"><img src="http://mysite.wanadoo-members.co.uk/achelous/van.gif" alt="van"/></span><br />
    <a href="#" onmouseover="van('three')">This is a van link</a>
    <span class="foo" id="three"><img src="http://mysite.wanadoo-members.co.uk/achelous/van.gif" alt="van"/></span>
    </div>
    
    </body>
    </html>
    
    </textarea>
    </form>
    
    </body>
    
    
    ...the code shown in green will appear as the content of the textarea and is ediitable...
    you can remove it and then you will start with a blank textarea.

    coothead

  7. #7
    Zapotec's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2004
    Posts
    6

    addition to van-script

    Hi
    I have a simple question.
    How do I make the van-mouseover script change between 2 pics? One permanently showing and then changing to another on mouseover.

  8. #8
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there Zapotec,

    and a warm welcome to these forums

    There are two ways of doing this. One is with javascript and the other is with csss.

    javascript method
    Code:
    
    <html>
    <head>
    <title>image mouseover</title>
    <base href="http://coothead.homestead.com/files/">
    
    <style type="text/css">
    <!--
    
    body {
        background:#003380;
     }
    
    #container {
        width:108px;
        position:absolute;
        top:200px;
        left:50%;
        margin-left:-50px;
    }
    
    #foo {
        border:inset 4px #333399;
     }
    
    //-->
    </style>
    
    <script type="text/javascript">
    <!--
    
    function rollOver(obj) {
         obj.src="anim1.gif";
        
    document.onmouseout=function() {
        obj.src="anim3.gif";   
     }
    }
    
    //-->
    </script>
    
    </head>
    <body>
    
    <div id="container">
    <img id="foo" src="anim3.gif" onmouseover="rollOver(this)">
    </div>
    
    </body>
    </html>
    
    css method
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>css rollover</title>
    <base href="http://coothead.homestead.com/files/"/>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    
    body {
        background:#003380;
     }
    
    #container {
        width:108px;
        position:absolute;
        top:200px;
        left:50%;
        margin-left:-50px;
    }
    
    a#foo:link {
        display: block;
        width: 100px;
        height: 100px;
        background-image: url("anim3.gif");
        border:solid 2px #000000;
    }
    
    a#foo:hover {
        background-image: url("anim1.gif");
        border:solid 2px #000000;   
    }
    
    /* ]]> */
    </style>
    
    </head>
    <body>
    
    <div id="container">
    <a href="#"  id="foo"></a>
    </div>
    
    </body>
    </html>
    
    coothead

  9. #9
    Zapotec's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2004
    Posts
    6

    More mouseover again

    Thanks to coothead for quick reply and greetings. Yet it was not quite the way I wanted it. (I am picky )

    I want it more like the original 'van' mouseover.
    But I want a Toyota (or whatever) to appear beside the textlink when mouse is off the textlink and a Ford to appear when the mouse is over the textlink.

    Mouse over the image should not change the image, only when mouse is over the textlink.

    And I want it to be possible to have a row of links (like the original van-example), so I can make a menu out of it.

    So, similar to the original example, but with a Toyota permanent beside the link, switching to a Ford when mouse is over the text only.

    Can this be done?

  10. #10
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there Zapotec,

    no problem, try this....
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Mouseover Van Links</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <base href="http://achelous.mysite.wanadoo-members.co.uk  "/>
    <style type="text/css">
    /*<![CDATA[*/
    
    a {
         font-family:arial;
         font-size:16px;
         color:#000000;
     }
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    function vanToT(id) {
    
         document.getElementById(id).src="ford_T.jpg"
    
    document.onmouseout=function() {
    
          document.getElementById(id).src="van.gif";
      }
     }
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <div>  
    <a href="#" onmouseover="vanToT('one')">This is a van link</a>
    <span><img id="one"src="van.gif" alt="van"/></span><br />
    
    <a href="#" onmouseover="vanToT('two')"> This is a van link</a>
    <span ><img id="two" src="van.gif" alt="van"/></span><br />
    
    <a href="#" onmouseover="vanToT('three')">This is a van link</a>
    <span><img  id="three"src="van.gif" alt="van"/></span>
    
    </div>
    
    </body>
    </html>
    
    It is important to, prevent movement of links, that the images all have the same dimensions.

    coothead

  11. #11
    Zapotec's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2004
    Posts
    6

    Mouseover and over

    Thanks coothead. Now we are getting somewhere.

    But what if I want a different two set of pics for each text link?

    Text link 1 (Image TFord switching to AFord)
    Text link 2 (Image Toyota switching to Mazda)
    Text link 3 (Image Lexus switching to Infinity)
    ...and so on for other links in the series.....

    Can that be done?

    I bet you already regret that you ever answered my posting but I really appriciate your help.

    Thanks
    Zapotec

  12. #12
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there Zapotec,

    yes it can be done, this involves introducing an Array and preloading
    the images to insure a smooth rollover.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Mouseover  Links</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <base href="http://coothead.homestead.com/files/"/>
    
    <style type="text/css">
    /*<![CDATA[*/
    
    a {
         font-family:arial;
         font-size:18px;
         color:#000000;
     }
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
       
      var preloads=[];
    function preload(){
          for(var c = 0; c < arguments.length; c++) {
               preloads[preloads.length] = new Image();
               preloads[preloads.length - 1].src = arguments[c];
      }
    }
    
      var image=new Array();
        image[0]="van.gif";
        image[1]="ford_T.jpg";
        image[2]="anim.gif";
        image[3]="anim1.gif";
        image[4]="anim2.gif";
        image[5]="anim3.gif";
    
    function vanToT(id,over,out) {
    
         document.getElementById(id).src=image[over];
    
    document.onmouseout=function() {
    
          document.getElementById(id).src=image[out];
      }
     }
    preload('van.gif','ford_T.jpg','anim.gif','anim.gif','anim2.gif','anim3.gif');
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <div>  
    <a href="#" onmouseover="vanToT('one',1,0)">This is a  link</a>
    <span><img id="one" src="van.gif" alt="van"/></span><br />
    
    <a href="#" onmouseover="vanToT('two',3,2)"> This is a  link</a>
    <span ><img id="two" src="anim.gif" alt="anim"/></span><br />
    
    <a href="#" onmouseover="vanToT('three',5,4)">This is a  link</a>
    <span><img  id="three"src="anim2.gif" alt="anim2"/></span>
    
    </div>
    
    </body>
    </html>
    Are we getting close yet

    If not you may have to wait a while...I'm off to Rome for a few days.

    coothead

  13. #13
    Zapotec's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2004
    Posts
    6

    Mouseover trouble is over

    Thats it.
    Thank you so very much.
    Have a nice trip to Rome, and hurry back in case I need help with something else.

    Zapotec

  14. #14
    Zapotec's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2004
    Posts
    6

    I'm back

    I'm wondering how to make the last solotion work without trigging annoying dangerous-dangerous-messages in IE with SP2.
    It is fixed by allowing active content, in the security section of advanced IE settings.
    But I assume that default settings in IE will trigger the warning, and most people use default settings. (Most people use IE as well )
    Any idea what to do?

    Zapotec

  15. #15
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there Zapotec,

    sorry nothing I can do abou I.E. and SP2

    But why don't you encourage your viewers to download a top quality browser....

    like Firefox

    I only use I.E. for testing purposes, and have uninstalled SP2 as that warning
    was really getting up my nose

    coothead



Page 1 of 2 1 2 Last

Tags for this Thread