Results 1 to 7 of 7

Thread: Image changes on Link Hover?

  1. #1
    Join Date
    Dec 2006
    Location
    Singapore
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image changes on Link Hover?

    Hello

    I was just wondering if there's a Javascript (or whatever works) for this.

    Let's say I have a few links in a list:

    1. A
    2. B
    3. C

    Is it possible that as one hover each link, an image at another fixed part of the layout changes?

    Take a look at this website. As you hover over the image, the text below changes, is it possible to do it the other way?

    I did a search before posting and anything that came close was this thread.

    Quote Originally Posted by Minos

    it could be as simple as

    <a href="./images/image1.gif" target="myFrameName">Hover HERE!</a>

    or could require javascript to change the .src of the image.
    I do not want users to click for the image to appear, ruling the first suggestion out. But what exactly does the 2nd line mean? =/

    I'm open to all suggestions! >.< Your help is much appreciated! Also, please don't use too much Javascript or related jargon, I would rate myself a total newbie in this area. =/

    (If this is in the wrong forum, please move it accordingly I guess. >.<)

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    http://www.dynamicdrive.com/dynamici...thumbnail2.htm

    In the above script, images or text may be hovered or clicked to change an image elsewhere on the page. In simplest terms (or darn near simplest terms) you can do this sort of thing like so:

    HTML Code:
    <img name="theimage" src="some.gif"><br>
    <span onmouseover="document.images.theimage.src='other.gif'">Hover me</span>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2005
    Location
    Moscow, Russia
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Such as this 2nd example: http://javascript.aho.ru/example/JsPrimeryCode-67.htm (with cyrillic font), but need to write onmouseover insread onclick. And to preload pictures automatically by onload.

    Code:
    <table align=right width=420 height=340 border=1 cellspacing=0><tr><td align=center>
    	<img id=i1 src="snow.gif"><br>
    	<u><b id=d1>(place for caption)</b></u></td></tr></table><br>
    <B>Preloading images.</B><br><br>
    
    <SCRIPT>d=document;g=function(X){return document.getElementById(X)}
    aimg='snow.gif,snow21.gif,fo167-YM20030829-1.jpg,Imaf4-YM20041031.jpg'.split(',');
    adiv='snow;snow21;summer;autumn'.split(';');
    
    preloadPict=function(i){aim=[];for(i=0;i<aimg.length;i++){aim[i]=new Image();aim[i].src=aimg[i];
    	 name=d.getElementsByName('ahref')[i].innerHTML=adiv[i];}}
    viewPict=function(i){if(!self.aim)preloadPict();if(!self.aim||!self.aim[aimg.length-1])return;
    	g('i1').src=aim[i].src;g('d1').title=g('d1').innerHTML=adiv[i];}
    
    onload=preloadPict
    </SCRIPT><br><br>
    
    View by mouseover:<br>
    <a href=# name=ahref onmouseover=viewPict(0);return!1>1</a><br>
    <a href=# name=ahref onmouseover=viewPict(1);return!1>2</a><br>
    <a href=# name=ahref onmouseover=viewPict(2);return!1>3</a><br>
    <a href=# name=ahref onmouseover=viewPict(3);return!1>4</a><br><br>
    This code is placed for example on http://javascript.aho.ru/example/JsPrimeryCode-67a.htm .

  4. #4
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    this could be accomplished with css.

    This code Should Work
    <style>
    div.bgchange1 {background-image: url('bgnormal1.jpg')}
    div.bgchange1:hover {background-image: url('bgchanged1.jpg')}

    div.bgchange1 {background-image: url('bgnormal1.jpg')}
    div.bgchange1:hover {background-image: url('bgchanged1.jpg')}
    </style>

    <div class="bgchange1"><a href="Doc.html">
    <img src="transperent.gif">
    </a></div>

    <div class="bgchange2"><a href="Doc2.php">
    <img src="transperent.gif">
    </a></div>

    also, this way can be easier to implement. i find JS complicated.
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    12345c,

    Your method seems a bit complex for a beginner such as Hikoto claims to be and poorly thought out. Your opening script tag is invalid, the type attribute is required. Using 'g', 'd', and especially 'i' as globals is just asking for conflicts with other poorly chosen global variable names in other scripts. Using the onload event to preload images is less efficient than simply preloading them and is another potential source of script conflicts.

    boxxertrumps,

    Unless I misunderstood your example, it will not work in any but the latest (IE 7) version of explorer and I fail to see how much simpler all that is than the basic javascript example I offered. Perhaps you need to stop being afraid of javascript. Both css and javascript can be very simple or very complex or anything in between, depending upon how complexly a particular bit of one or the other of them is written.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    In My Defense, I Have A Small Attention Span, And The CSS Is Valid!
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by boxxertrumps View Post
    In My Defense, I Have A Small Attention Span, And The CSS Is Valid!
    Valid is good, works is better. The css can be made to be both valid and compatible with IE 6 and earlier. You did leave off the type attribute for your style tag though. I guess technically you are right though, the style itself looks valid (except there is no reason to repeat it, that would throw at least a caution flag in the validator) to my casual eye and 'should' work but doesn't in a non-compliant browser such as IE 6 and earlier.

    For the hover pseudo class to work in IE 6 and earlier, it must be used with a selector that selects an anchor link tag. This can be worked out at least two ways I can think of. One is to make the anchor link's display property block and applying your background change to its hover class. The other is by making a child element of the anchor link appear and disappear depending upon the hover state of its parent like is done here:

    http://www.dynamicdrive.com/style/cs...image-gallery/
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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