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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question image swapping | targeting on mouseover

    hi,

    I just wondered if anyone could help me out? I am working on a little site http://www.romalazio.co.uk (a one pager) and on the right there are eight basic onmouseover links called S1-S2 (for buying tickets), a logo for two football teams appears onmouseover on S2-S8 while the first link (S1) onmouseover changes the football pitch top right to two team logos. what I want to do is for each onmouseover link to change BOTH, ergo a multiple image switching onmouseover code.

    html for S1 first link of the eight page right is:

    <a target="content" onmouseover=document.screen.src=twoteams.src onmouseout=document.screen.src=stadio.src href="href="http://www.paypal.com"><img src="s1.gif"></a>

    target image html is:

    <table class="ss" style="background-color: #FFFFFF;" height="188" width="273" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top" align="center">

    <img src="stadio.gif" height="188" width="231" border="0" alt="football in italy, olympic stadium" name="screen" /></td>

    </tr>
    </table>

    external .js is:

    <!-- start link duality

    if (document.images)

    {

    twoteams = new Image
    stadio = new Image

    twoteams.src = "twoteams.gif"
    stadio.src = "stadio.gif"

    }

    else

    {

    twoteams = ""
    document.screen = ""

    }

    // end link duality -->

    *****************

    html for S2 link (same as S3-S8 too) page right is:

    <a target="content" href="http://www.paypal.com" onmouseover="swapImage('image2','s2a.gif')" onmouseout="swapImage( 'image2' ,'s2.gif')"><img src="s2.gif" border="none" name="image2"></a>

    external .js w/preload is:

    <!-- start preload

    function preLoadImages()

    {

    var t='<layer top="-100" left="0" visibility="hide"><div style="position:absolute; top:-100px; left:0px;

    visibility:hidden">';
    for(i=0;i<arguments.length;i++)t+='<img src="'+arguments[i]+'" height="10" width="10">';
    t+='</div></layer>';
    document.write(t);

    }

    preLoadImages('s1a.gif','s2a.gif','s3a.gif','s4a.gif','s5a.gif','s6a.gif','s7a.gif','s8a.gif');

    function swapImage(imgN,imgU)

    {

    if(document.images)document.images[imgN].src=imgU;

    }

    // end preload -->

    <!-- start image swapping

    function swapImage(imgN,imgU)

    {

    if(document.images)document.images[imgN].src=imgU;

    }

    // end image swapping -->


    thankyou

    pete

  • #2
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Hey Pete if I am understanding you correctly, you want a multi image rollover effect, where by you mouseover an image an two other images change? if that is correct here is my code, maybe you can play with it to aceive what you need:


    <img src="team1_off.gif" name="team1">
    <img src="team2_off.gif" name="team2">

    <a href="link_here.html" onMouseover="team1.src='team1_on.gif', team2.src='team2_on.gif'" onMouseout="team1.src='team1_off.gif', team2.src='team2_off.gif'"><img src="image_you_mouseover.gif"></a>

    I hope this helps.

    -Dave
    www.prowebworks.net

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You've used images for everything!! How am I suppose to easily test this? Am I correct in assuming you don't want anyone to find your page? That's utterly ridiculous.

  • #4
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ?

    thanks for the SEO advice heme, the site is 6 weeks off completion and don't worry, it will have bags of keywords, spider food and all the rest between now and then. if you can help with my question, that would be cool.

    thanku

    pete

  • #5
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by hardclub92
    thanks for the SEO advice heme, the site is 6 weeks off completion and don't worry, it will have bags of keywords, spider food and all the rest between now and then.
    Are you mocking me? Where is a fist-shaking smiley when you need one?
    Quote Originally Posted by hardclub92
    if you can help with my question, that would be cool.
    Well, when I provide solutions, I like to provide a clean solution that corrects anything else I percieve as being incorrect (tables for layout, that sort of thing). The problem I have here is, you've basically given me almost nothing to work from. You page will simply fall apart should I remove anything. I also have to save all your images.

    There is a very simple (and elegant) way to do what you want, but your current framework is simply no good. I would honestly start from scratch.

    I know this main sound harsh/arrogant/offensive but that's not my intention. It's no use me prancing about complimenting you on something when you really need to fix this. You'll end up with a better end-result.

    And yes, it is worth the effort to do the job properly.

  • #6
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile done!

    re. http://www.romalazio.co.uk
    x2 image swapping links S1-S8 page right
    no external .js just asis + 'name="imgx" as below.

    <img src="stadio.gif" height="188" width="231" border="0" alt="football in italy, olympic stadium" name="imgx" />

    followed by...

    <table class="ss" width="271" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="271" valign="top" align="center">

    <a target="content" href="http://www.paypal.com" onMouseover="document.img1.src='s1a.gif'; document.imgx.src='twoteams.gif';"

    onMouseout="document.img1.src='s1.gif'; document.imgx.src='stadio.gif';">
    <img src="s1.gif" name="img1" border="0"></a>

    <br />
    <br />

    <a target="content" href="http://www.paypal.com" onMouseover="document.img2.src='s2a.gif'; document.imgx.src='twoteams.gif';"

    onMouseout="document.img2.src='s2.gif'; document.imgx.src='stadio.gif';">
    <img src="s2.gif" name="img2" border="0"></a>

    <br />
    <br />

    <a target="content" href="http://www.paypal.com" onMouseover="document.img3.src='s3a.gif'; document.imgx.src='twoteams.gif';"

    onMouseout="document.img3.src='s3.gif'; document.imgx.src='stadio.gif';">
    <img src="s3.gif" name="img3" border="0"></a>

    <br />
    <br />

    <a target="content" href="http://www.paypal.com" onMouseover="document.img4.src='s4a.gif'; document.imgx.src='twoteams.gif';"

    onMouseout="document.img4.src='s4.gif'; document.imgx.src='stadio.gif';">
    <img src="s4.gif" name="img4" border="0"></a>

    <br />
    <br />

    <a target="content" href="http://www.paypal.com" onMouseover="document.img5.src='s5a.gif'; document.imgx.src='twoteams.gif';"

    onMouseout="document.img5.src='s5.gif'; document.imgx.src='stadio.gif';">
    <img src="s5.gif" name="img5" border="0"></a>

    <br />
    <br />

    <a target="content" href="http://www.paypal.com" onMouseover="document.img6.src='s6a.gif'; document.imgx.src='twoteams.gif';"

    onMouseout="document.img6.src='s6.gif'; document.imgx.src='stadio.gif';">
    <img src="s6.gif" name="img6" border="0"></a>

    <br />
    <br />

    <a target="content" href="http://www.paypal.com" onMouseover="document.img7.src='s7a.gif'; document.imgx.src='twoteams.gif';"

    onMouseout="document.img7.src='s7.gif'; document.imgx.src='stadio.gif';">
    <img src="s7.gif" name="img7" border="0"></a>

    <br />
    <br />

    <a target="content" href="http://www.paypal.com" onMouseover="document.img8.src='s8a.gif'; document.imgx.src='twoteams.gif';"

    onMouseout="document.img8.src='s8.gif'; document.imgx.src='stadio.gif';">
    <img src="s8.gif" name="img8" border="0"></a></td>

    </tr>
    </table>

    thankyou dave@prowebworks and thankyou hemebond@

  • #7
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    comment: I know you posted a question, but I thought I would make a few comments. I am afraid to see that page on dial up, How many images is that?.... I have good eyesite and I have trouble reading your site, I have a feeling a lot of the older people that would view the site will not be able to read it. Plus I had a heck of a time figureing out what to click and what not to click!

    Spiders do not really read meta data anymore really since people abused it to wits end.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #8
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up hi

    thanks eric it's great to read comments on here, I was using a font size fixed in css beforehand and my god it was so impossible to read so my webmaster friends told me! the images are actually easier to read now! the site is weeks away from completion anyway I am of course going to add REAL text lol in the next few days or so, I use IBP (www.axandra.com) to promote my other sites and meta tags still seem to be pretty important? thanks! thanks! for the verbage anyway pete


  •  

    Posting Permissions

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