Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: CS4 image swaps problem

Reply
Thread Tools

Re: CS4 image swaps problem

 
 
BootNic
Guest
Posts: n/a
 
      11-09-2013
In article <(E-Mail Removed)>,
Bob H <(E-Mail Removed)> 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+vwCeIunIjzwh1N cWOWwPCmZi6GfL
ZJUAn2CzOxp9jld6KX7GdjHqhIMsg9pq
=/jmS
-----END PGP SIGNATURE-----

 
Reply With Quote
 
 
 
 
BootNic
Guest
Posts: n/a
 
      11-10-2013
In article <(E-Mail Removed)>,
Bob H <(E-Mail Removed)> wrote:

> On 09/11/2013 21:38, BootNic wrote:
>> In article <(E-Mail Removed)>,
>> Bob H <(E-Mail Removed)> 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%20Beds/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+3coACgkQOcdbyBqMFBE0igCgzLuFz7JPrD BsKguylFeyyaaZ
/p4AoLPTDBTkN3X1BP8rezPhWwTkwjVq
=2aj1
-----END PGP SIGNATURE-----

 
Reply With Quote
 
 
 
 
TK
Guest
Posts: n/a
 
      11-10-2013
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/java...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!"
 
Reply With Quote
 
BootNic
Guest
Posts: n/a
 
      11-10-2013
In article <(E-Mail Removed)>,
Bob H <(E-Mail Removed)> 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-----

 
Reply With Quote
 
BootNic
Guest
Posts: n/a
 
      11-10-2013
In article <(E-Mail Removed)>,
Bob H <(E-Mail Removed)> 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-----

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      11-11-2013
In article <(E-Mail Removed)>,
Bob H <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Endian swaps with C++; comments please Aaron Graham C++ 20 02-02-2006 12:44 PM
Function that swaps arguements - is this right? Ook C++ 9 10-09-2005 06:59 AM
emacs swaps windows tschulz Python 1 11-10-2004 02:30 PM
Help with Image Swaps Bender MX HTML 4 11-15-2003 03:16 AM
Merrill Lynch swaps out Cisco VoIP gear for Avaya???? Patrick Lam Cisco 0 07-29-2003 06:13 AM



Advertisments