liampetro

Hey super quick question, and apologies if this has already been answered in the thread above, but I have an idea for my personal website that I’m told requires image mapping. I hit a bit of a roadblock because I was told that image mapping will be off with variations in the screen size you view the website on… a) is this accurate? b) if it is, what other options are there for me to achieve the desired effect? Here’s the link to the website https://www.liampietraszewski.com/ …and just to briefly describe the idea, you’ll note that the home screen is a living room setting. I’d like it so that upon mouse hover over maybe a dozen different places on the Home Screen, an image will appear beneath the cursor that gives the static image the appearance of movement (ie. Hover over the cat, the cat’s tail goes up; hover over the man on the couch, he looks at you; etc.). I’d also love for some of these interactive places to link out to other pages on the website, as well as the hovering effect described above. I’m looking for any help here. Thank you thank you!

Hey thanks for your help! I'm wondering if there is any other way to achieve the desired effect I described above with squarespace. I'm wondering if I've approached it in the wrong way. Right now, I'm using the Basil site template and am using the full-screen banner for the illustrated image on the home page of my website. Here's the website URL again just for convenience: https://www.liampietraszewski.com/ Thanks again!

Yes of course! Sorry I'm late with the reply https://www.liampietraszewski.com/

Hey there! So I'm going to try to explain this as best I can. I have this idea to give my website a more interactive feel that involves images appearing upon the mouse hovering over a portion of the home page. If you take a look, the website is currently just a static image as the entirety of the homepage. There are maybe a dozen items in the drawing that is the home page that I'd like visitors to "interact" with just by hovering the mouse over these spaces. For example, upon hovering over the book on the coffee table, the it opens and links to a page of artwork I've done. The small keyboard on the coffee table would lights up and have some keys pressed down, and then links to music I've made. Or even more simply and without links, hovering over the image of the cat causes her to lift her tail up. I'm treating this somewhat like simple animation, where what is currently seen on the site is Frame #1 in my mind. In the example of the book on the coffee table, Frame #2 would be the sketch book laid open with a drawing in it. My question is: how do I do this? I'm determined to make this work but lack the know-how to get this the way I want it. P.S. Maybe this is of importance but I got the idea for the site described above based on a code I used on a previous site of mine where hovering over one image caused another image to appear in the exact same place: <img src="image 1" onmouseover="this.src='image 2'" onmouseout="this.src='image 1'" I tried messing with this thinking it would do the trick but it only made this more difficult and I felt I wasn't headed in the right direction. Thanks and I'd very much love some help!

Much appreciated!! Let's say I don't want to do this to the homepage? How might this change the code above? PLUS, depending on which page I'd want to apply this change to, would that change the lines of code as well?

Absolutely! Thanks for the response! https://www.liampietraszewski.com

Hey there! This feels like it should be easy but I'm not finding anything online to help me out with it. I'm using Squarespace 7.0 and would like to add a background image to just one page. Please let me know if I'm not being clear enough. Thanks! My research has led me to this scrap of code that has allowed me add a background image, but to every page on my site. Maybe this is a good jumping off point? I don't know. I'm a coding novice 🙂 body { background-image: url(https://example.com/image.jpg); }

@iamdavehart Thanks so much for your help! So just to make sure things look finished and appealing, my plan (if possible) was to use PNGs of a number of different line lengths that match the length of the text. That way I wouldn't have to stretch one image and compromise aesthetics. Below is a sample of various line lengths that I would cut, export as PNG files of a standardized height, and then include into Squarespace. Now I'm imagining that makes things much more complicated or impossible. The reason why I can only imagine this is because I'm a coding novice, and even that is a generous title. If there's anything else you can give me or some solutions to this issue that would be awesome!

Site URL: https://fiddle-reed-4bh7.squarespace.com/config/design/custom-css More specifically, I'd like like it so that when I hover over a given option on the home page, a png appears beneath the text to underline it. As shown, I've photocopied rough, pen drawings/lines as a stylistic choice. It'd be cool to carryout this style in a number of ways throughout the site. So the PNGs would be of simple lines drawn in pen, but I'd want these lines to appear under each option upon a mouse hovering over that specific option. Take a look at the mockup below. Anybody have any ideas? p.s. let me know if you need help accessing the website.