Re: CS4 image swaps problem

Discussion in 'HTML' started by BootNic, Nov 9, 2013.

  1. BootNic

    BootNic Guest

    In article <>,
    Bob H <> wrote:

    > Using Dreamweaver CS4, I have place 3 images on a webpage and
    > used the Behaviours option to swap the images with 3 others.


    > That works fine in live view and when I upload the page to my
    > site, the images don't change in html but will in ftp. So I ftp
    > to my files and folders, then select the file I want, images swap
    > ok, great I thought, but as soon as I changed to
    > www.sitename/index.html, they don't work or swap. uh?


    URL?

    > Anyone know what the problem may be.


    --
    BootNic Sat Nov 9, 2013 04:38 pm
    One must learn by doing the thing, for though you think you know it, you have
    no certainty until you try.
    *Aristotle*

    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v1.4.11 (GNU/Linux)

    iEYEARECAAYFAlJ+q08ACgkQOcdbyBqMFBE+vwCeIunIjzwh1NcWOWwPCmZi6GfL
    ZJUAn2CzOxp9jld6KX7GdjHqhIMsg9pq
    =/jmS
    -----END PGP SIGNATURE-----
     
    BootNic, Nov 9, 2013
    #1
    1. Advertising

  2. BootNic

    BootNic Guest

    In article <>,
    Bob H <> wrote:

    > On 09/11/2013 21:38, BootNic wrote:
    >> In article <>,
    >> Bob H <> wrote:


    >>> Using Dreamweaver CS4, I have place 3 images on a webpage and
    >>> used the Behaviours option to swap the images with 3 others.


    >>> That works fine in live view and when I upload the page to my
    >>> site, the images don't change in html but will in ftp. So I ftp
    >>> to my files and folders, then select the file I want, images
    >>> swap ok, great I thought, but as soon as I changed to
    >>> www.sitename/index.html, they don't work or swap. uh?


    I do not use Dreamweaver, never even had a desire to look at it.

    Had to look up what behaviours in Dreamweaver may be. With a wee
    bit of research and your usage of swap, may I presume that the
    three images are suppose to change when moused over?

    >> URL?


    >>> Anyone know what the problem may be.


    > Yes here, sorry:
    > http://www.bob2cat.org.uk/Garys Beds/index.html


    If this is the javascript mouse over event for the images, it
    appears to work as I would expect a javascript mouse over to work.
    Of course it fails to do anything at all with javascript disabled
    such as one may expect with the noscript extension in Firefox.

    There are many was to use css to achieve an images swap on
    mouseover/hover without the need for javascript.


    --
    BootNic Sat Nov 9, 2013 08:13 pm
    "Do not trust your memory; it is a net full of holes; the most beautiful
    prizes slip through it."
    *Georges Duhamel, The Heart's Domain*

    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v1.4.11 (GNU/Linux)

    iEYEARECAAYFAlJ+3coACgkQOcdbyBqMFBE0igCgzLuFz7JPrDBsKguylFeyyaaZ
    /p4AoLPTDBTkN3X1BP8rezPhWwTkwjVq
    =2aj1
    -----END PGP SIGNATURE-----
     
    BootNic, Nov 10, 2013
    #2
    1. Advertising

  3. BootNic

    TK Guest

    On 11/10/2013 5:01 AM, Bob H wrote:
    > On 10/11/2013 01:13, BootNic wrote:


    >> There are many was to use css to achieve an images swap on
    >> mouseover/hover without the need for javascript.
    >>
    >>

    >
    > You wouldn't mind at least pointing me in the right direction would you.
    >


    http://www.oreillynet.com/pub/a/javascript/2001/03/23/rollovers.html
    is in fact a non javascript (aka css) solution.

    --
    TK ~ aka Terry Kimpling
    http://wejuggle2.com/video.php
    Soon to be called "Tricks I could do when I was only 65!"
     
    TK, Nov 10, 2013
    #3
  4. BootNic

    BootNic Guest

    In article <>,
    Bob H <> wrote:

    > On 10/11/2013 01:13, BootNic wrote:


    [snip]

    >> There are many was to use css to achieve an images swap on
    >> mouseover/hover without the need for javascript.


    > You wouldn't mind at least pointing me in the right direction
    > would you.


    Sure, the trigger for a css hover event, like a:hover {…}. With
    that one could change the position of say an image or background,
    and many other wonderful things that may not be supported by the
    browsers you wish to support.

    An example that should degrade fairly well, yet use a fade in/out
    for a modern UA.

    <style type="text/css">

    :root .swap > img {
    left: 0;
    position: absolute;
    top: 0;
    }
    :root .swap > img:nth-of-type(1) {
    bottom: 0;
    -moz-opacity: 1;
    opacity: 1;
    -moz-transition: opacity 750ms ease-in-out;
    -ms-transition: opacity 750ms ease-in-out;
    -webkit-transition: opacity 750ms ease-in-out;
    -o-transition: opacity 750ms ease-in-out;
    transition: opacity 750ms ease-in-out;
    z-index: 10;
    }
    :root .swap:hover > img:nth-of-type(1) {
    bottom: 0;
    -moz-opacity: 0;
    opacity: 0;
    -moz-transition: opacity 750ms ease-in-out;
    -ms-transition: opacity 750ms ease-in-out;
    -webkit-transition: opacity 750ms ease-in-out;
    -o-transition: opacity 750ms ease-in-out;
    transition: opacity 750ms ease-in-out;
    }
    ..swap {
    height: 300px;
    -moz-outline: rgb(255, 0, 0) solid 1px;
    outline: rgb(255, 0, 0) solid 1px;
    overflow: hidden;
    position: relative;
    width: 400px;
    }
    ..swap > img {
    display: block;
    height: 300px;
    position: relative;
    width: 400px;
    }
    ..swap:hover > img {
    bottom: 300px;
    }

    </style>

    <div class=swap>

    <img
    src="http://bootnic.x10host.com/one.jpg"
    width="400"height="300" alt="one">

    <img
    src="http://bootnic.x10host.com/two.jpg"
    width="400" height="300" alt="two">

    </div>



    --
    BootNic Sun Nov 10, 2013 09:55 am
    Man who scratch ass should not bite fingernails.
    *Ancient Chinese Proverbs*

    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v1.4.11 (GNU/Linux)

    iEYEARECAAYFAlJ/nlQACgkQOcdbyBqMFBHbcQCfSHjUBdFod3dGLn90FYnLPHLD
    f4UAn3+twaQVmkDtlBIJFeHARmM3e68T
    =2XeY
    -----END PGP SIGNATURE-----
     
    BootNic, Nov 10, 2013
    #4
  5. BootNic

    BootNic Guest

    In article <>,
    Bob H <> wrote:

    [snip]

    > Pardon me for asking, but is something supposed to happen when I
    > hover my mouse over either of the 2 pics.


    Yes.

    http://bootnic.x10host.com/Image-Hover-Example.html


    --
    BootNic Sun Nov 10, 2013 10:33 am
    It is well known that "problem avoidance" is an important part of problem
    solving. Instead of solving the problem you go upstream and alter the system
    so that the problem does not occur in the first place.
    *Edward de Bono*

    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v1.4.11 (GNU/Linux)

    iEYEARECAAYFAlJ/py8ACgkQOcdbyBqMFBEGFQCeIRTZKD7Q1oKKse0mxYHRmyT2
    48YAnjv5T9z9NYpUtM+TTvS2/NP5b/fw
    =G+5E
    -----END PGP SIGNATURE-----
     
    BootNic, Nov 10, 2013
    #5
  6. BootNic

    dorayme Guest

    In article <>,
    Bob H <> wrote:

    > >> On 09/11/2013 21:38, BootNic wrote:

    ....
    > >
    > > There are many was to use css to achieve an images swap on
    > > mouseover/hover without the need for javascript.
    > >
    > >

    >
    > You wouldn't mind at least pointing me in the right direction would you.


    If you want to follow this way in DW, best to ask in a DW forum.

    Otherwise, for hand markup in a plain text editor: "image swap in css"
    will get you a few tips on it.

    Here is one example of one way that might suite someone or other in
    some situation or other (that was lurking about in my files, something
    I did a while ago). Uses background imaging, probably not so useful in
    most circumstances but it gives an idea of what CSS can do with :hover.

    <http://dorayme.netweaver.com.au/imgSwap/imageSwapOnHover.html>

    --
    dorayme
     
    dorayme, Nov 11, 2013
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bender MX

    Help with Image Swaps

    Bender MX, Nov 14, 2003, in forum: HTML
    Replies:
    4
    Views:
    412
    Bender MX
    Nov 15, 2003
  2. tschulz

    emacs swaps windows

    tschulz, Nov 9, 2004, in forum: Python
    Replies:
    1
    Views:
    301
    Harry George
    Nov 10, 2004
  3. Ook
    Replies:
    9
    Views:
    305
    Sandeep
    Oct 9, 2005
  4. Aaron Graham
    Replies:
    20
    Views:
    1,760
    Aaron Graham
    Feb 2, 2006
  5. Replies:
    8
    Views:
    369
Loading...

Share This Page