Results 1 to 8 of 8

Thread: Mouse-Over image for Subcategory in Main block

  1. #1
    Join Date
    Dec 2011
    Location
    Birmingham, United Kingdom
    Posts
    135

    Default Mouse-Over image for Subcategory in Main block

    Hi all,

    I am trying to assign a mouse-over effect to a sub-category image for the main block...BP only seems to allow a main image:

    Bibles>King James Version

    So I am trying to do it with code sorry not very good, so this is what I have worked out so far...any help appreciated

    categories/thumbnail "onmouseover="src='img/kjv button.png'" onmouseout="src='/img/kjv button clicked"

    Thanks

  2. #2
    Join Date
    Aug 2016
    Posts
    132

    Default

    Quote Originally Posted by Phoenix View Post
    Hi all,

    I am trying to assign a mouse-over effect to a sub-category image for the main block...BP only seems to allow a main image:

    Bibles>King James Version

    So I am trying to do it with code sorry not very good, so this is what I have worked out so far...any help appreciated

    categories/thumbnail "onmouseover="src='img/kjv button.png'" onmouseout="src='/img/kjv button clicked"

    Thanks
    Hi,

    Is the attached image what your trying to change when the mouse scrolls over and if so, what are you trying to replace it with?


    Mike
    Attached Images Attached Images

  3. #3
    Join Date
    Dec 2011
    Location
    Birmingham, United Kingdom
    Posts
    135

    Default

    Quote Originally Posted by Mikey View Post
    Hi,

    Is the attached image what your trying to change when the mouse scrolls over and if so, what are you trying to replace it with?


    Mike
    Hi Mike

    Yes it is that image, so I am trying to replace it with the same thing, just lighter! Like when you hover over the categorys in the left hand navigation block

    Thanks

  4. #4
    Join Date
    Aug 2016
    Posts
    132

    Default

    Quote Originally Posted by Phoenix View Post
    Hi Mike

    Yes it is that image, so I am trying to replace it with the same thing, just lighter! Like when you hover over the categorys in the left hand navigation block

    Thanks
    Rather than messing around with JavaScript, editing and uploading more images etc., you can get a similar effect with a couple of line of CSS. Give the following code a go by copying & pasting it in to: 'Template Editor'> 'Pages'> 'Additional CSS':

    Code:
    div#cb_id_CONTENT.isblock td.pcborder img {
    transition: 0.3s;
    }
    
    div#cb_id_CONTENT.isblock td.pcborder img:hover {
    opacity: 0.6;
    }

    Let me know if this result is what you had in mind,

    Mike

  5. #5
    Join Date
    Dec 2011
    Location
    Birmingham, United Kingdom
    Posts
    135

    Default

    Hi thanks Mike

    This is exactly what I want to do, is there a way to do it without the products in the category doing that too?

    Thanks

  6. #6
    Join Date
    Aug 2016
    Posts
    132

    Default

    Quote Originally Posted by Phoenix View Post
    is there a way to do it without the products in the category doing that too?
    In addition to the code above, try adding the following line too:

    Code:
    div#cb_id_CONTENT.isblock #product_list_inner td.pcborder img:hover {
    opacity: unset;
    }

    Let me know how you get on,

    Mike

  7. #7
    Join Date
    Dec 2011
    Location
    Birmingham, United Kingdom
    Posts
    135

    Default

    Hi Mike

    Thank you so much, that worked really well!

    Much appreciated!

  8. #8
    Join Date
    Aug 2016
    Posts
    132

    Default

    Quote Originally Posted by Phoenix View Post
    Hi Mike

    Thank you so much, that worked really well!

    Much appreciated!
    No Problem!!

    You can play around with the transition value to change the amount of time it takes to fade in & out and also change the opacity value to set the level of transparency/fade.


    Mike

Similar Threads

  1. Hiding Variant Image Thumbnails Under Main Product Image
    By Paula in forum Bluepark Technical Discussion
    Replies: 2
    Last Post: 25-02-2013, 11:36
  2. Move main menu block
    By oneshayes in forum Bluepark Technical Discussion
    Replies: 1
    Last Post: 25-01-2011, 22:14
  3. Main navigation over state
    By shelleym in forum Bluepark Technical Discussion
    Replies: 6
    Last Post: 06-10-2010, 11:42
  4. Drop down nav menu with images and mouse over - like play dot com
    By charmaine in forum Bluepark Technical Discussion
    Replies: 8
    Last Post: 17-04-2010, 14:04

Posting Permissions

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

Bluepark's ecommerce software is developed, hosted and supported exclusively by ourselves, here in the UK, and has been so since the company was initially formed in 2004. Your brand new online shop will be hosted securely on our fast and reliable server network, using a domain name of your choice, providing the ability to build and maintain your ecommerce website, and manage your orders, from any location via your own secure online Administration Console.

A Bluepark ecommerce site is the perfect tool for selling online, whether you're selling physical products, digital downloads or services. You'll be in good company with over 1,000 UK customers who also form a friendly and helpful online community, further strengthening our highly acclaimed support network.

Find us on...