1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Dynamic image

Discussion in 'HTML & Website Design' started by Victor.I, Jan 14, 2019.

  1. #1
    Hello

    Is there a way to dynamically change the colors of the product image as the customer selects a different color from product options?

    I know this is possible with manually uploading each images and dynamically changing the images as they select different color options but my products have several color options.
    SEMrush
    You can change the color of:

    1. top

    2. middle

    3. bottom
    With each option having multiple color options - that would be hundreds of color combination and hundreds of images for ONE product alone.

    Here's an example of what we're looking to do:

    https://maruccisports.com/ap5-custom-pro/

    Do you know of a tool ,API or eCommerce platform capable of this ? Or is extensive coding the only way ?

    Thank you very much for your help
     
    Victor.I, Jan 14, 2019 IP
    SEMrush
  2. hdewantara

    hdewantara Active Member

    Messages:
    434
    Likes Received:
    36
    Best Answers:
    19
    Trophy Points:
    80
    #2
    Hello Victor.I
    is it possible to see a screenshot of the product here?
     
    hdewantara, Jan 14, 2019 IP
  3. Victor.I

    Victor.I Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Hello hdewantara
    No it is not possible as my project is only in pototyping right now.

    Also, I did get an answer from the developper of https://maruccisports.com/ap5-custom-pro/
    He said :" I'm the developer who built the website you linked. We use custom scripting that renders the image based on the selected options. Each layer is exported as an individual image, and we're using the HTML Canvas API to overlay the images into one. It's definitely something you'd need to customize a theme for though. The other option would be to do an API integration to make creating the image rules easier. I'm sorry there's not an easy answer!"

     
    Victor.I, Jan 14, 2019 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,702
    Likes Received:
    1,567
    Best Answers:
    227
    Trophy Points:
    515
    #4
    I get worried the way people throw around the word "API" these days, as if you magically need some high level abstraction to give you access to OS level operations and hardware control to make a website.

    This isn't rocket science, and it sure as shine-ola isn't worthy of the name "Application Program Interface".

    Make each of your three sections as alpha transparent PNG files and load them as images. The transparency in those images should be the area you want to colour, leaving your background around the images opaque. When you click on the colour, apply that colour as the background-image CSS property of said IMG tags.

    You could also use radio buttons with the CSS3 :checked attribute to absolute position sibling elements an INPUT using a 'painters algorithm' of z-index to place/set the colours for each section.

    Mind you, with normal HTML this technique would only work if all your sections intersect horizontally or vertically. IF the edges between coloured areas are straight you'd need to get CANVAS or SVG involved, but that too isn't entirely rocket-science.

    I'm on the way towards a medicated nap right now thanks to double-pounding cold medicine like it was a dunkins iced coffee, but when I get up I'll toss together a simple example to show you what I mean.
     
    deathshadow, Jan 15, 2019 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,730
    Likes Received:
    1,063
    Best Answers:
    20
    Trophy Points:
    400
    #5
    qwikad.com, Jan 15, 2019 IP