📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Public
Edited
Nov 4, 2021
4 stars
FileAttachment("twitter_avatar.jpg").image()
FileAttachment("twitter_avatar.jpg").image({
width: 100
})
FileAttachment("twitter_avatar.jpg").image({
style: "border: 2px solid red; border-radius: 50%; box-shadow: 8px 8px 8px;",
width: 300,
title: "My Avatar",
alt: "My Avatar Image"
})
FileAttachment("twitter_avatar.jpg").image({
crossOrigin: "anonymous"
})
FileAttachment("twitter_avatar.jpg").image({
onclick: (e)=> {
console.log(`${e.target.tagName} clicked`)
e.target.style.border="10px solid black"
},
onmouseover: (e)=> {
e.target.style.width="300px"
e.target.style.filter="grayscale(0)"
},
onmouseout: (e)=> {
e.target.style.width="200px"
e.target.style.filter="grayscale(.5)"
},
classList: "foobar baz",
style: "cursor: pointer;"
})
<style>
/** image above starts out gray because we added the foobar class **/
.foobar {
filter: grayscale(1)
}
</style>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
