Fit code/image inside my table? - javascript

Good evening everyone! I am having a bit of a problem and need some advice or assistance. I designed a site in Photoshop, sliced it and exported it out as HTML/Images. I brought the HTML file into Dreamweaver, this is what I have and it is great.
View the slice here.
click here!
My problem is, I am trying to get some JavaScript/Jquery code inside those empty white boxes you see in the link above. click here! But when I try to put the images in my layout from the above link, my layout gets completely realigned and I cant seem to fix it and looks like this click here!
I give my sincere thanks to anyone who can offer any assistance or advice on this matter!

Well your first problem is outputting a sliced Photoshop file for web. It does it horribly and you should really just do it yourself.
Secondly, you need to make sure all your widths and heights are the same when putting in an image in that blank spot.
But really, you should just redo the code of it all.. using images for text is a no no. Your whole site could basically be done in HTML/CSS instead of with images.

Related

How do I include images array in Scrollama.js project

I'm very new to coding and for one of my classes we're doing a project that consists of creating a webpage with a scrollytelling element using scrollama.js. I found a side sticky template online that I'm trying to use, but I can't figure out how to set it up so that a new image shows up when a new box hits the trigger line on the page. My professor set up a boilerplate example here, but it doesn't have the layout I want and I can't figure out from looking at his example how he set up the array of images. To be clear, I don't want my images in the background like in the boilerplate example, I want them in the sticky window that's on my project,
Here is the Code Pen of my project.
From what I read, I thought I could alter this line:
sticky.querySelector("p").innerText = el.dataset.step;
But, I've tried variations of different things with no success.
If anyone can help it would be much appreciated. Also, I'm likely wanting to set up a few different sections of scrollama on the page, so if anyone has any advice on setting that up too please let me know.

How to make like a tree connecting lines in css or javascript

The idea is somehow related to this LINK.
I don't know if this is right to ask but I hope this is ok to ask. Also that link is somehow might be closer to somehow like this I wanted to happen if its possible.
enter image description here

Treeview in ContextMenu

I got this crazy idea trying to display a tree in a context menu. I did a google search and cudnt find anything related. Can this actually be achieved? I know I am not posting in any code, but wanted to get all your guidelines before I start with the coding part of it.
Regards,
Nikhil
Only one work around comes in my mind here. You should first of all disable the default conextmenu. And then you can show your absolutely positioned div which contains a treeview next to the cursor.

Hover over an image area to change the image src

Basically, I have an image (of text) that I want to change to one of four other images on rollover of different areas. The difference is, on roll-off, I want it to remain what it was changed to, unless my mouse enters a different area. I've tried image-maps and whatnot but I can't seem to get this right. As far as my overall coding knowledge goes... well, I started last week, but I'm getting there.
Here's a link to an image overview of what i (kind of) mean.
I know it has probably been answered somewhere at some point but I really haven't managed to find anything that works yet - all I've managed is stuff that either disappears completely or doesn't work with multiple images. Any help would be much, much appreciated.
YOu can use image maps
http://www.outsharked.com/imagemapster/
this is great tool, try it. it is not so hard :)

Image Magnifiers and Clickable Content

I'm currently using an application that generates large images for organizational maps, unfortunately the content is quite small due to the volume of data being output. I would like to find a way that allows the user to view segments of the map in an intuitive manner, yet still allow the user to click content inside of the map.
The first thing that came to mind was an image magnifier using something similar to the loupe jQuery plugin. This works great for magnifying the image, but I can't select content once magnified. If anyone has any suggestions for possible solutions to this issue I would greatly appreciate the help.
Thanks!
You might try Etalage: http://frique.me/demos/etalage/ -- if you click on the image, the link works (triggers the javascript alert), almost no other image zoomer seems to do that.
I'm trying to find something that returns the coordinates on a click, so I can ask users to zoom and and find things within a picture, and then I'll have the coordinates to crop the picture to extract the items they've found. But I haven't found a script that does that yet, either.

Categories