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 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    24
    Thanks
    8
    Thanked 0 Times in 0 Posts

    trouble with mouseover image

    hi there, i am a novice at this and have copied and pasted code to try and acheive what i need but am having trouble. I have two functions, one to show random ads but the second is to show the "ads" in a larger image in a different place when mouseover. Although this code works i now want to adapt it to show a slightly different picture. Here is the code i am using and a presume the problem lies with the showIt(this.src) as i dont want it to show the same picture. Any help would be great. Thank you

    here is the script i am using

    <head>
    <script type="text/javascript" src="??????????.js"></script>
    <script type="text/javascript">
    function showIt(imgsrc)
    {
    var holder = document.getElementById('imageshow');
    var newpic= new Image();
    newpic.src=imgsrc;
    holder.src=imgsrc;
    holder.width =300;
    holder.height=300;
    }
    </script>
    </head>

    and here is the main body code

    <a href="http://www.???????.com/" target="_blank"><img src="???????.jpg" width="100" height="100" border="1" onmouseover="showIt(this.src)"></a>'

  • #2
    New Coder
    Join Date
    Jul 2010
    Posts
    61
    Thanks
    0
    Thanked 21 Times in 21 Posts
    Presumably your large images are correspondingly named according to a given scheme, so you need to state what that scheme is.

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    24
    Thanks
    8
    Thanked 0 Times in 0 Posts
    please forgive me for my ignorance but i am a complete novice, my images are all named seperately on the .js file as a seperate line for each image:

    <a href="http://www.???????.com/" target="_blank"><img src="????1.jpg" width="100" height="100" border="1" onmouseover="showIt(this.src)"></a>'

    <a href="http://www.???????.com/" target="_blank"><img src="????2?.jpg" width="100" height="100" border="1" onmouseover="showIt(this.src)"></a>'

    etc etc as this was the best way for me to do and understand the random ads.

    Then i presume the ShowIt(this.src) allows the exact same image to show only larger, as a novice i dont understand how or where to change the code to show a different image on the mouseover

    the larger image is displayed by this

    <img src="??????.jpg" id="imageshow" width=300 height=300>

    but the image source on this refers to a holding image

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,184
    Thanks
    80
    Thanked 4,451 Times in 4,416 Posts
    But you still haven't told us how the FILE NAME of the "slightly different picture" is related, if at all, to the file name of the thumbnail.

    If there isn't any relationship, then you'll have to create a logical link of some kind between the two names.

    One possible *VERY* simple way:
    Code:
    <img id="MAIN" style="border: solid black 3px; width: 300px; height: 300px;" />
    ...
    <img src="xyz.jpg" style="width: 100px; height: 100px;" 
         onmouseover="document.getElementById('MAIN').src='whatever.png';" />
    ...
    But the difficulty with that is that there will be a delay in showing "whatever.png" the first time, as it is downloaded from the server. So you probably want something a tiny bit more sophisticated.

    If you would tell us how--if at all--the small and large image FILE NAMES are related, it would be easier to help you. Even if they aren't related, there are ways to do this, just not as easily.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Jul 2010
    Posts
    24
    Thanks
    8
    Thanked 0 Times in 0 Posts
    sorry if i am not very clear, at the moment the relationship between the two images is that it is the SAME image, i have copied script that simply shows the exact same image in a different location by the onmouseover=showIt(this.src) i presume. So as i am very poor at javascript i am now trying to add an additional feature where i replace the image with a complete new unrelated image and was hoping there would be something obvious i was missing. Again i apologise if this is not clear and frustrating but the novice i am is clearly showing here

    if it helps here is the full code, its confusing me due to the random ads section being very important too:

    .js file

    var adblock=new Array()
    adblock[0]='<a href="http://www.1.com/" target="_blank"><img src="1.jpg" width="100" height="100" border="1" onmouseover="showIt(this.src)"></a>'
    adblock[1]='<a href="http://www.2.com/" target="_blank"><img src="2.jpg" width="100" height="100" border="0" onmouseover="showIt(this.src)"></a>'
    adblock[2]='<a href="http://www.3.com/" target="_blank"><img src="3.jpg" width="100" height="100" border="0" onmouseover="showIt(this.src)"></a>'


    function randomorder(targetarray, spacing) {
    var randomorder=new Array()
    var the_one
    var z=0
    for (i=0;i<targetarray.length;i++)
    randomorder[i]=i

    while (z<targetarray.length) {
    the_one=Math.floor(Math.random()*targetarray.length)
    if (targetarray[the_one]!="_selected!"){
    document.write(targetarray[the_one]+spacing)
    targetarray[the_one]="_selected!"
    z++
    }
    }
    }


    .html file

    <html>
    <head>
    <script type="text/javascript" src="???????.js"></script>
    <script type="text/javascript">
    function showIt(imgsrc)
    {
    var holder = document.getElementById('imageshow');
    var newpic= new Image();
    newpic.src=imgsrc;
    holder.src=imgsrc;
    holder.width =300;
    holder.height=300;
    }
    </script>
    </head>

    <body>
    <table border="1" width=100%>
    <tr>
    <td>
    <th>
    <script type="text/javascript">
    randomorder(adblock, '')
    </script>
    </th>
    </td>
    <td width=300>
    <img src="holdingimage.jpg" id="imageshow" width=300 height=300>
    </td>
    </tr>
    </table>


    </body>
    </html>
    Last edited by mollysugden; 07-19-2010 at 10:45 PM.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,184
    Thanks
    80
    Thanked 4,451 Times in 4,416 Posts
    I guess you didn't understand my post.

    Yes you *COULD* simply change:
    Code:
    <img src="3.jpg" width="100" height="100" border="0" onmouseover="showIt(this.src)">
    to something like
    Code:
    <img src="3.jpg" width="100" height="100" border="0" onmouseover="showIt(\'xyz.jpg\')">
    But, as I said, this will mean that the first time you mouseover "3.jpg" it will take time to download the picture "xyz.jpg" and display it. Not the best user experience.

    If you know the names of *ALL* the possible replacement pictures ahead of time, then you can do image pre-loads and the user experience is better.

    By the by, as it is now, your showIt( ) function code is overly complex for no purpose.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    mollysugden (07-19-2010)

  • #7
    New Coder
    Join Date
    Jul 2010
    Posts
    61
    Thanks
    0
    Thanked 21 Times in 21 Posts
    Quote Originally Posted by mollysugden View Post
    sorry if i am not very clear, at the moment the relationship between the two images is that it is the SAME image, i have copied script that simply shows the exact same image in a different location by the onmouseover=showIt(this.src) i presume. So as i am very poor at javascript i am now trying to add an additional feature where i replace the image with a complete new unrelated image and was hoping there would be something obvious i was missing.
    That was all understood initially, but to make the task easier there should be a relationship between the corresponding file names, like 1.jpg and 1_big.jpg etc, in which case you could use:

    onmouseover = "showIt( this.src.replace('.jpg', '_big.jpg') )"

  • Users who have thanked RandomUser531 for this post:

    mollysugden (07-19-2010)

  • #8
    New Coder
    Join Date
    Jul 2010
    Posts
    24
    Thanks
    8
    Thanked 0 Times in 0 Posts
    thank you very kindly to both of you as this appears to work perfectly, sorry for the long winded understanding from my end, The 'simple' option does what i need but in future there will be hundreds of pictures and if you have the time i would be grateful of an easier option to run this script. Basicalli what i have got does what i want ie, randomise a collection of images then upon mouseover show a related but different image in a seperate location.

    As i said before your solutions work and i am very grateful for your help, but i am always looking for an easier and better option for future as the site develops and increases in size

    cheers

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,184
    Thanks
    80
    Thanked 4,451 Times in 4,416 Posts
    Well, actually, this simple way might be the best idea if you have hundreds of pictures.

    First of all, if you had 100 small thumbnails then you really *SHOULD* create small thumbnail images!! If the actual images on disk are big--100KB or larger--and yet they are displayed in a 100x100 spot in the browser, you are making the user's browser download *ALL* those large images (10MB or more!!) when you could have gotten away with may a tenth or twentieth the download. People will get mad at you for making them wait forever for a bunch of tiny images.

    Anyway, if you also have 100 separate large images, the same problem attains. Until all 100 of those large images are sent from the server to the browser, you'll have to wait for the image before it will show.

    Now, there are ways to "pre-load" images, behind the scenes, using JavaScript. And so the page will come up reasonably quickly and the pre-loading will happen after the page appears. Yet, still, you can't guarantee that the image the user rolls over will already be downloaded. And there still can be a delay.

    If you can live with the delays, though, then the simple code we have shown you works just fine.

    In general, any time you start talking "hundreds of images" for a web page, *some place* you are going to pay the price, in terms of download time.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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