File size: 1,144 Bytes
7a1a80a b27df08 b8e8b7e 5077d50 b8e8b7e 5077d50 b8e8b7e 5077d50 b8e8b7e 5077d50 b8e8b7e 5077d50 b8e8b7e 5077d50 b8e8b7e 5077d50 b8e8b7e 5077d50 b8e8b7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
import streamlit as st
# Load the image
image_path = "test.png"
image_url = f"data:image/png;base64,{st.file_uploader(image_path, type='png')}"
# HTML and CSS for the button overlaid on the image
st.markdown(
f"""
<style>
.image-container {{
position: relative;
width: fit-content;
}}
.image {{
display: block;
}}
.button {{
position: absolute;
top: 50%; /* Adjust to place the button */
left: 50%; /* Adjust to place the button */
transform: translate(-50%, -50%);
background: none!important;
border: none;
color: black;
text-decoration: none;
cursor: pointer;
font-size: 20px;
padding: 10px 20px;
}}
.button:hover {{
text-decoration: none;
color: black;
background: rgba(255, 255, 255, 0.5);
}}
</style>
<div class="image-container">
<img class="image" src="{image_url}" alt="Image with clickable button">
<button class="button" onclick="window.alert('Button clicked!');">Click Me</button>
</div>
""",
unsafe_allow_html=True,
)
|