Camera Craniums

Software, Editing and Printing => Editing Tips and advice => Topic started by: Malcolm1938 on March 17, 2010, 11:17:03 PM

Title: Image swap
Post by: Malcolm1938 on March 17, 2010, 11:17:03 PM
I have been able to set up mouse over image swaps on my computer for some time and feel it is very useful for demonstrating changes but I've not been able to do it in a forum post. I asked Mick for help and while I cound not put it directly into a post he suggested a way to achieve it.

It seems to work so the link below will take you to a before and after image, just move your cursor on and off the image.

Please regard this as a tryout posting and if anyone wants to know how it is done please PM me. If demand is high enough we could possibly do a small tutorial.

  LINK   (http://www.primrose-smith.com/malcolm_imageswap.html)
Title: Re: Image swap
Post by: Graham on March 18, 2010, 05:47:31 AM
   Oh now that's interesting. I could "spill the beans" on a couple of my gigpics! ;)
                    Graham.
           
Title: Re: Image swap
Post by: Colin on March 18, 2010, 07:01:19 AM
 :( not working for me in FF3.6 with javascript turned on.  :'(
Title: Re: Image swap
Post by: Malcolm1938 on March 18, 2010, 07:24:09 AM
Very strange - I prepared it in FF 3.6.

Do you get any image at all - are you blocking images with adblock or something - your computer may think it's an advert or pop up.

you may have to wait a little the first time you use it.

Title: Re: Image swap
Post by: Jonathan on March 18, 2010, 07:30:48 AM
Works for me in FF 3.6 OS X.  Doesn't work on an iPhone ;)
Title: Re: Image swap
Post by: ABERS on March 18, 2010, 08:09:06 AM
An interesting facility, like the option in L/room. It allows viewers to see where the photographer is coming from and of course where he/she ends up. I think it would be of great help to anyone starting out.
Title: Re: Image swap
Post by: Hinfrance on March 18, 2010, 08:17:02 AM
Doesn't work on an iPhone ;)

Hardly anything does  :legit:

Not so flash eh? (http://theflashblog.com/?p=1703) - yeah I know this is about the iPad, but it's the same OS.
Title: Re: Image swap
Post by: Just Dave on March 18, 2010, 08:33:42 AM
Works for me in FF 3.6, windows 7, its a good idea but you need a website to be able to host your onMouseOver and onMouseOut script
Title: Re: Image swap
Post by: Jonathan on March 18, 2010, 08:40:58 AM
Doesn't work on an iPhone ;)

Hardly anything does  :legit:

Not so flash eh? (http://theflashblog.com/?p=1703) - yeah I know this is about the iPad, but it's the same OS.

Um no, it's because onMouseOver doesn't work if you don't have a mouse.....

Interesting link but they have it backwards.  Lots and lots of people are abandoning flash because iPhone/iPad doesn't support it rather than the other way round.  You can control the technology your website uses.  You can't control the technology your customers use to view it.
Title: Re: Image swap
Post by: Mick on March 18, 2010, 09:21:47 AM
Works for me in IE8.  :tup:
Title: Re: Image swap
Post by: Hinfrance on March 18, 2010, 09:47:18 AM
Jonathan, I thought your finger was the mouse pointer on a touch screen?

iPad hasn't even shipped yet. iPhone's are a niche product. You'd need to be mad to switch all your effort to pandering to a minority of your customers. You should, of course, seek to please all of them, but HTML5 is still some way from universal acceptance and somewhat further from universal availability, and so for the majority of web sites not worth implementing in addition to flash.

The reason the Jesus products don't have flash is because they can't make it work properly. Simples. ;) Watch out, there's an Android about . . .

BTW the mouse over works in opera too Mick.
Title: Re: Image swap
Post by: Mick on March 18, 2010, 10:08:08 AM

Please regard this as a tryout posting and if anyone wants to know how it is done please PM me. If demand is high enough we could possibly do a small tutorial.


If anyone wants to take this a step further, and thinks would it be a good idea to create some workflow tutorials?  I will gladly add them to my server for all to view.

I've played with some free software called Wink (http://www.debugmode.com/wink/) to create some rough looking tutorials, but I'm sure if a Little time spent using the software we could have some great looking tuts.  Or if anyone has any other free software in mind please share. ;)

Here's an example of one of my rough (very) ones.  :-X

Clicking this link will open the tutorial in a new window, (http://cameracraniums.com/forum/tp-images/sitetuts/movethumb.jpg) (http://cameracraniums.com/forum/tp-images/sitetuts/moveimage/move_tutorial.htm)
Title: Re: Image swap
Post by: Jonathan on March 18, 2010, 11:36:47 AM
Jonathan, I thought your finger was the mouse pointer on a touch screen?

It is.  But it can't detect hover.

iPad hasn't even shipped yet. iPhone's are a niche product. You'd need to be mad to switch all your effort to pandering to a minority of your customers.

Absolutely.  But you'd be amazed how many people hit up my site on mobile devices when they are on the way to a meeting to get directions or contact details.  iPhone is 10X as popular as Symbian for my visitors.  Android accounts for 2% of mobile visitors.  Windows Mobile "fewer" :)

Clever Javascript can do pretty much everything Flash can and it tends to load much faster and is easier to update.  I see Flash dying out in a year or two.
Title: Re: Image swap
Post by: Hinfrance on March 18, 2010, 12:45:38 PM
You're probably right about flash, but I think it might take a bit longer.

I'm afraid that extrapolating personal experience to estimate a whole world norm is something we all tend to do. The figures, however, speak for themselves. Despite the loud and omnipresent marketing by denizens of Cupertino the iPhone has about a 1% share of the mobile device market, and barely 10% of the smart phone market, although that 10% is a pretty well defined niche, including perhaps a younger demographic thinking of settling down and with enough money to afford one of the best wedding photographers out there :)

Of the people I know the split is pretty even. Personally the HTC Hero was the bit of kit that impressed me the most. Not that I would ever bother getting one. Well, probably not, anyway.

Just off to have a look at the tutorial.
Title: Re: Image swap
Post by: SimonW on March 18, 2010, 01:12:19 PM
Cannoffice - your page works fine for me in FF3.6, A useful technique. And I can view the code with a right-click and "view source".
(Mind you, the edited photo looks tilted while the gateposts in the original look vertical.)

Mick - clicking your link gives me a new tab with a fairly short html listing, obviously not working how you'd expect.
Title: Re: Image swap
Post by: Hinfrance on March 18, 2010, 01:42:18 PM
Tutorial link not working here either.
Title: Re: Image swap
Post by: Oldboy on March 18, 2010, 05:30:52 PM

Please regard this as a tryout posting and if anyone wants to know how it is done please PM me. If demand is high enough we could possibly do a small tutorial.


If anyone wants to take this a step further, and thinks would it be a good idea to create some workflow tutorials?  I will gladly add them to my server for all to view.

I've played with some free software called Wink (http://www.debugmode.com/wink/) to create some rough looking tutorials, but I'm sure if a Little time spent using the software we could have some great looking tuts.  Or if anyone has any other free software in mind please share. ;)

Here's an example of one of my rough (very) ones.  :-X

Clicking this link will open the tutorial in a new window, (http://cameracraniums.com/forum/tp-images/sitetuts/movethumb.jpg) (http://cameracraniums.com/forum/tp-images/sitetuts/moveimage/moveimage)

Works for me.  ;D

I use to use Visual Basic for this type of thing with the onclick option.  ;D
Title: Re: Image swap
Post by: Mick on March 18, 2010, 05:32:35 PM
Tutorial link not working here either.

 :doh:  hmm, works for me.  I'll take a look and see if I can sort it.

Meanwhile try this one and see if it works.  

Create a gallery. 
(http://cameracraniums.com/forum/tp-images/sitetuts/createthumb.jpg) (http://cameracraniums.com/forum/tp-images/sitetuts/create/creategal.htm)
Clicking this image will open the tutorial in a new window.

Edit: And now hopefully working,

Move a image from public gallery to your own gallery. 
(http://cameracraniums.com/forum/tp-images/sitetuts/movethumb.jpg) (http://cameracraniums.com/forum/tp-images/sitetuts/moveimage/move_tutorial.htm)
Clicking this image will open the tutorial in a new window.
Title: Re: Image swap
Post by: Hinfrance on March 18, 2010, 05:44:10 PM
Works now Mick.
Title: Re: Image swap
Post by: Malcolm1938 on March 18, 2010, 05:58:26 PM
The easy way to set this up is to put your 2 images into a new folder (preferable sized to width 800px)

Open a new front page document - delete any text on it and copy this text onto the page

<html>
<head><title>Javascript - OnMouseOver example</title></head>

<body>

<a href="malcolm_imageswap.html"
onMouseOver='document.images.dance.src="P3103830_DxO_raw.jpg"'
onMouseOut='document.images.dance.src="P3103830.jpg"'>
<img src='P3103830.jpg' name='dance' alt="dance"></a>

</body>
</html>


Now put your image names where mine are


onMouseOver='document.images.dance.src="P3103830_DxO_raw.jpg"'   - Your after image goes here
onMouseOut='document.images.dance.src="P3103830.jpg"'>               -  Your before image goes here
<img src='P3103830.jpg' name='dance' alt="dance"></a>                   -  Your before image goes here also

Now save the page into the folder where the images are and when you click on the saved page it should work....

I have done exactly this many times and have rechecked it today so give it a try.