The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Multiple Buttons change images in fixed area through html?
Ruggero
post Sep 30 2018, 10:08 PM
Post #1





Group: Members
Posts: 4
Joined: 30-September 18
Member No.: 26,721



I'm trying to best approximate with html what is probably in done in Javascript. In the link there are pressable
buttons that change the image of the girl holding the white cards(but not the image position). Can this be done with html?

In the link it's the blonde girl in black holding the cards and the buttons like 8x10 to the right. The buttons say 8x10, etc....


https://www.printful.com/custom/wall-art/po...?size=8%C3%9710



This is what I'm talking about below. The image changes with each different button(8x10, etc....) clicked but not the image positions.



IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 1 2018, 12:17 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,280
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



With HTML, you could have multiple pages, each displaying an inline image. Clicking on the "8x10" link would display the page that displays the image showing 8x10 stock. Clicking on the "10x10" link would display the page that displays the image showing the 10x10 stock. And so on.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 1 2018, 05:15 AM
Post #3


.
********

Group: WDG Moderators
Posts: 7,919
Joined: 10-August 06
Member No.: 7



You could also generate each HTML page with a serverside script (e.g. PHP).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 1 2018, 07:03 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



Or you could load the images (or pages with the image in question if you want to keep the links) in an IFRAME.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Ruggero
post Oct 1 2018, 08:47 AM
Post #5





Group: Members
Posts: 4
Joined: 30-September 18
Member No.: 26,721



Thanks Darin, Christian and Pandy. I'm trying to keep the same page on screen but just have the images replaced by each other as the different buttons are clicked. I may not understand all the solutions offered but I think the iframe might work as long as I can switch out images instead of webpages. This W3schools example iframe example could work as long as different side-by-side buttons pressed revealed different images in the iframe instead of webpages.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Ruggero
post Oct 1 2018, 09:00 AM
Post #6





Group: Members
Posts: 4
Joined: 30-September 18
Member No.: 26,721



Or maybe an iframe without a border just showing an image instead of a page, Like this borderless iframe w3schools but an image instead, and buttons that this example doesn't have.



The image below is the iframe within a page that just has an image but how would I get rid of the scroll at the bottom? It doesn't scroll because the iframe is the same dimension as the image but still shows a bar at the bottom.

Below is the code I used. I thought the "border" css was supposed to remove the scroll bar.

<iframe img src="https://jurassicgorilla.com/wp-content/uploads/2018/09/posters4.png" width="360" height="203" style="border:none;"></iframe>

IPB Image




This post has been edited by Ruggero: Oct 1 2018, 09:21 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Ruggero
post Oct 1 2018, 09:39 AM
Post #7





Group: Members
Posts: 4
Joined: 30-September 18
Member No.: 26,721



I got it to work without the scroll bar: <iframe img src="https://jurassicgorilla.com/wp-content/uploads/2018/09/posters4.png" overflow:scroll scrolling="no" frameborder="0" width="360" height="203" style="border:none;"></iframe>

I think it's the (scrolling="no") that did the trick. I'll have to check because I added (overflow:scroll) and (frameborder="0") which I have to experiment or research to find out what effect they have.

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd October 2018 - 12:57 PM