Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Bernard West

  • Content Count

  • Joined

  • Last visited

  • Days Won


Bernard West last won the day on June 30 2015

Bernard West had the most liked content!


Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. That's basically saying that there are no thumbnail images on the page. Do you actually have any images on your page?
  2. You can use the @media css query to specify a different set of css styles for different devices (i.e. via screen resolution). See - http://www.w3schools.com/cssref/css3prmediaquery.asp edit: replaced link with the correct one.
  3. replace removes the url from the browser cache. I haven't thought about this too much, but instead of window.location.replace(url);try: window.location="www.google.com"; That will keep the previous url in the cache. I'm just not sure exactly how it will interact with tryingtobehelpful's code above. Only one way to find out.. ;)
  4. I'm not 100% sure of what your question is. You can change any image you want with a hover/rollover effect. You just need to target each image. If you want each image to have the exact same hover effect, then you could probably write a javascript routine to do that. One thing to remember about my answer above... It uses javascript because the orginal image to be replaced for the OP was an animated gif. If you just have a static image, then it's best to use CSS for the hover effect. I, and others, can help you with that too. It's much easier with CSS than with javascript.
  5. It's only the first time, as after that the images are cached. But first time visitors to your site will not see a very professional effect.
  6. I don't know if the image sizes of the new images are too big, but there is a delay in the roll-over effect the first time the image loads. That's really poor form. If rowzi doesn't get back to you guys to help, post back here and I'll help you do this. edit to add: Here's a solution I did for someone else. It had to be customised a bit due to the original image being an animated gif.http://answers.squarespace.com/questions/75445/changing-an-image-block-to-another-image-on-hover-or-rollover?page=1#76481
  7. It seems to be working now, albeit with bad formatting.
  8. cont from above: Anyway, try replacing 'http://oi58.tinypic.com/2vnqq1g.jpg' in the code above with 'https://www.dropbox.com/s/dw6q5m6sj8urzh8/2vnqq1g.jpg?raw=1' and you can see the result. That's a link to the resized file on my dropbox. I'll leave that link live for a day or two, but after that I will delete it. You can either steal that image from my dropbox, or create your own so that it matches the image ratio of 700:709 (width:height).
  9. Ok, I changed the aspect ratio of the replacement image to match the aspect ratio of the original gif, and it works fine. Of course, the original gif is still being cropped, so if you want to fix that you'll have to add some white space around the top and bottom of it to make it's aspect ratio match that of the img container on your website. At which point we'll need to change the aspect ratio of the replacement image again. :) cont. below:
  10. Yeah, I'll have a look at the formatting now. Not sure if you realise, but the original animated gif is too big for the container. In the real image his hands aren't cut off, but on your site they are. Both images are being height matched to the height set in your design and that's causing the replacement image to stretch horizontally. In other words, the ratio of the image container on your site doesn't match the ratio of the images being put in there. Anyway, I'll have a look and see what I can do.
  11. Ok, I've worked out a javascript solution. It still needs a little tweaking to get the formatting of the new image right, but it's late and I'll have to get back to that tomorrow. Instead of using a CSS "hover" selector, it uses a javascript "onmouseover" and "onmouseout" instead. That overcomes the problem with the hover selector not interacting with the animated gif properly. So, you need to stick this code into the header of that specific page (page settings->advanced->page header code injection). From past experience, it might not work in the header. If it doesn't we'll need t
  12. I couldn't help myself so I had a go at it. ;) Logically the javascript I wrote works fine, but there's a problem with the mouse hover interacting with the animated gif. As the gif cycles through, the "hover" deactivates until you move the mouse again. I'm not sure that the hover will be able to work with the gif. And the gif effects the hover of all it's parent elements too, so targeting one of the container elements of the image doesn't work either. I'm at a bit of a loss as to what to try next.
  13. I had a quick look. I was hoping to be able to do this with a css trick. I can't find a way to do it with CSS, so it's going to have to be done with javascript. Apologies again, but I'm too tired to write the javascript at the moment. I'll get back to this tomorrow.
  • Create New...