+ Post New Thread
Results 1 to 3 of 3
Web Development Thread, specific text for onmouseover event on images in Coding and Web Development; thus far I have the following - I have seen gradual image examples in javascript which I will most likely ...
  1. #1

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,207
    Thank Post
    2,763
    Thanked 935 Times in 875 Posts
    Rep Power
    343

    specific text for onmouseover event on images

    thus far I have the following - I have seen gradual image examples in javascript which I will most likely end up using instead of the way I am currently doing it to gradually resize the images but what I am wanting to do is have an array of strings and use a select case / switch that will load the relevant text string into a span id or text area depending on which image has the mouse over it and at the same time zoom in on said image so

    image 1 image 2 image 3 image 4 etc

    text area or span id here

    switch (image_name)
    case image 1
    text area or span id text = "This is image one"
    case image 2
    text area or span id text = "This is image two"
    etc

    on the image code I would use the onmouseover and onmouseout events so that when i hover over one image at a time with the mouse cursor it will zoom in gradually and load the relevant text / string into either the span id or text area ( span id preferably ) and on mouse out zoom out and blank out the text or string until the next image is hovered over

    Getting stuck as I am creating the function or sub ( tried with vbscript as vbscript should allow passing byval or byref and this does not work ) and also tried in javascript ie

    function image(name){

    code here

    }

    same again using byval and byref etc but regardless of what I am trying it is not working, help !!!

  2. #2

    CESIL's Avatar
    Join Date
    Nov 2006
    Location
    Hampshire
    Posts
    1,394
    Thank Post
    108
    Thanked 266 Times in 197 Posts
    Rep Power
    168
    I don't think you can do what you want with vbscript as this runs server side. I have done similar things in javascript.

    Can you post the javascript you have tried and I will try to help...

  3. Thanks to CESIL from:

    mac_shinobi (12th June 2010)

  4. #3

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,207
    Thank Post
    2,763
    Thanked 935 Times in 875 Posts
    Rep Power
    343
    HTML Code
    Code:
    <html>
    <title>mouse over example</title>
    
    <head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    
    <script language="JavaScript">
    <!-- Begin Image Mouseover Code
    
    image0 = new Image();
    image0.src = "ren1.jpg";
    
    image1 = new Image();
    image1.src = "ren2.jpg";
    
    image2 = new Image();
    image2.src = "ren3.jpg";
    
    image3 = new Image();
    image3.src = "ren4.jpg";
    
    </script> 
    </head>
    <body bgcolor="#FFFFFF">
    <script language="JavaScript">
    <!-- Begin Image Mouseover Code
    
    function out(str){
    var check;
    check = String(str);
    switch (check){
        case "ren1":
        document.it.txt1.value = 'You moved your mouse cursor over Renegade One';
        document.getElementById('mytext').innerHTML = 'You moved your mouse cursor over Renegade One';
    break;
    
        case "ren2":
        document.it.txt1.value = 'You moved your mouse cursor over Renegade Two';
        document.getElementById('mytext').innerHTML = 'You moved your mouse cursor over Renegade Two';
    break;
    
        case "ren3":
        document.it.txt1.value = 'You moved your mouse cursor over Renegade Three';
        document.getElementById('mytext').innerHTML = 'You moved your mouse cursor over Renegade Three';
    break;
    
    
    
    default:
        document.it.txt1.value = String('hover over an image');
        document.getElementById('mytext').innerHTML = String('hover over an image');
    }    
    }
    
    </script> 
    
    <!--<a href="index.htm" 
    <!--onMouseOver="document.rollover.src=image1.src" onMouseOut="document.rollover.src=image0.src"> 
    <!--<img src="ren1.jpg" border=0 name="rollover" width="40%" height="40%"></a>
    <div class="container">
    <div class="left-element">
    <center>
    
    <a href="index.htm"
    onmouseover="document.ren1.width='300';document.ren1.height='200';out('ren1');" onmouseout="document.ren1.width='150';document.ren1.height='100';">
    <img src="ren1.jpg" width="150" height="100" name="ren1"</a>
    
    <a href="index.htm"
    onmouseover="document.ren2.width='300';document.ren2.height='200';out('ren2');" onmouseout="document.ren2.width='150';document.ren2.height='100';">
    <img src="ren2.jpg" width="150" height="100" name="ren2"</a>
    
    <a href="index.htm"
    onmouseover="document.ren3.width='300';document.ren3.height='200';out('ren3');" onmouseout="document.ren3.width='150';document.ren3.height='100';">
    <img src="ren3.jpg" width="150" height="100" name="ren3"</a>
    </center>
    </div>
    
    <div class="right-element">
    
    <form name="it">
    <textarea id="txt1" name="txt1"></textarea>
    </form>
    <span id="mytext">Here's What You Get</span>
    </div>
    </div>
    </body>
    </html>
    CSS Code

    Code:
    .container {
       position: relative;
       height: 50px;
       }
    
    .left-element {
       position: absolute;
       left: 0;
       width: 50%;
       }
    
    .right-element {
       position: absolute;
       right: 0;
       width: 50%;
       text-align: right; /* depends on element width */
       }
    The above is what I have done so far but using javascript for the text side - I want to change two things now

    1. The zoom in and out effect so it is gradual of the images instead of the way I have done above so that it does it something like they have done here - I only want it to increase the image in size by a small percentage so say from a 300 * 300 px to big enough to see it and have one image frame underneath all the small images that are in a grid so that when you scroll over each image it loads the same image but the original image which will be larger into the image frame below.

    Gradual Image Resizing on Mouse Rollover

    Image wise I will have the thumbnail version in a directory called thumbnails and the original images in a directory called images ( both sets of images will have the same name so when hovering over the thumbnail called dog1.jpg it will load the larger version of dog1.jpg ( or original image regardless of format ) into the image frame underneath.


    2. The CSS Code - I want to lay the html code out so that the grid of images is at the top left, the image frame where the larger version of the same image is loaded directly underneath the grid of images in the centre vertically and horizontally and then the text loads on the right hand side vertically in the centre in a div that is about 3 inches or so

    I think I have more or less cracked how to load the text into both the span area and the text area ( not sure which is better to use )??

SHARE:
+ Post New Thread

Similar Threads

  1. Convert Text On Image Into Editable Text
    By DaveP in forum General Chat
    Replies: 4
    Last Post: 30th May 2013, 09:10 AM
  2. Specific VLE AUP?
    By Tegwin in forum Virtual Learning Platforms
    Replies: 1
    Last Post: 15th May 2009, 11:21 AM
  3. link to edit specific article
    By jeffy in forum EduGeek Joomla 1.5 Package
    Replies: 2
    Last Post: 14th March 2009, 02:08 PM
  4. Cannot send to specific domains..
    By timbo343 in forum Windows
    Replies: 7
    Last Post: 19th September 2006, 10:17 AM
  5. Blocking Specific Pages
    By Michael in forum Windows
    Replies: 4
    Last Post: 11th February 2006, 03:06 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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