1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

image popup while rolling (hovering) over text

Discussion in 'Web Design & Development' started by darnold, Jul 28, 2006.

Thread Status:
Not open for further replies.
  1. darnold

    darnold Thread Starter

    Joined:
    Dec 21, 2002
    Messages:
    459
    Im making an employee roster... I want to be able to rollover the employees name (text)and have an image come up when I rollover someone elses name I want them image to come up and so on... when Im not over anyones name I dont want any images there.

    is it possible to have it floating... for an example...

    when you rollover the Tech Support Guy Image on the top of this page you receive a box saying "Tech Support Guy Forums". I want to do an inverse of that. I want it to say "Tech Support Guy Forums (with no image, just plain text) and when you put your mouse over it the Tech Support Guy Image will show up instead.

    Please advise!
     
  2. face1

    face1

    Joined:
    Sep 16, 2005
    Messages:
    182
    try this script. it is an image swap behaviour so it will require a "default" image to swap the new pictures with. this image can be a company logo or even an "invisible" blank/transparent image. For best results, all images need to be the same pixel dimensions


    PUT THIS IN THE <HEAD> of html page

    ”******” is the file path / name of your image file (.jpg or .gif)

    make image1.src a default picture or empty transparent gif

    ….. for as many instances as you need ( unlimited, just add to or subtract from list)


    <SCRIPT LANGUAGE="JAVASCRIPT">
    if (document.images) {
    image1 = new Image
    image2 = new Image
    image3 = new Image
    image4 = new Image
    image5 = new Image
    image6 = new Image
    image7 = new Image
    image8 = new Image
    image9 = new Image
    image10 = new Image
    image11 = new Image
    image12 = new Image
    image13 = new Image
    image14 = new Image
    image15 = new Image
    image16 = new Image
    image17 = new Image
    image18 = new Image
    image19 = new Image
    image20 = new Image
    image21 = new Image
    image22 = new Image
    image23 = new Image
    image24 = new Image
    image25 = new Image
    image26 = new Image
    image27 = new Image
    image28 = new Image
    image29 = new Image
    image30 = new Image
    image31 = new Image

    image1.src = "******.gif"
    image2.src = "******.jpg"
    image3.src = "******.jpg"
    image4.src = "******.jpg"
    image5.src = "******.jpg"
    image6.src = "******.jpg"
    image7.src = "******.jpg"
    image8.src = "******.jpg"
    image9.src = "******.jpg"
    image10.src = "******.jpg"
    image11.src = "******.jpg"
    image12.src = "******.jpg"
    image13.src = "******.jpg"
    image14.src = "******.jpg"
    image15.src = "******.jpg"
    image16.src = "******.jpg"
    image17.src = "******.jpg"
    image18.src = "******.jpg"
    image19.src = "******.jpg"
    image20.src = "******.jpg"
    image21.src = "******.jpg"
    image22.src = "******.jpg"
    image23.src = "******.jpg"
    image24.src = "******.jpg"
    image25.src = "******.jpg"
    image26.src = "******.jpg"
    image27.src = "******.jpg"
    image28.src = "******.jpg"
    image29.src = "******.jpg"
    image30.src = "******.jpg"
    image31.src = "******.jpg"


    }
    </SCRIPT>


    Insert this script in the <body> at the point where you want the text link
    Where xxxxxx.htm could be a link from the text and ###### is the text you want to trigger the image swap….. for as many instances as you need ( unlimited, just add to or subtract from list)


    <!-- --><a href="xxxxxx.htm"
    onMouseOver="document.imagename.src=image2.src" onMouseOut="document.imagename.src=image1.src">#######</a><!-- -->


    Insert this code where you want the original / default image to appear (image01.src)
    Where ***** is the filepath/image name of the .jpg or .gif


    <!-- -->
    <img src="******.gif" name="imagename" border="0"><!-- -->
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/487188

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice