First off, I would like to say that myspace is a pain. But, musicians love it, and I can make some money doing layouts for them. I overlayed a layer of .png's over myspace's original look, but need to utilize the myspace music player. So, I made a picture frame that surrounds the myspace player that has a transparent center so you can see the myspace player. unfortunately, the player doesn't have full functionality. It seems to respond correctly when I hover, but not when I click. does anyone know how to solve this problem?
You can see what I'm talking about here: myspace.com/gprettydesigns
add
pointer-events: none;
on your overlay to alow click events to pass through it. It's a fairly recent property so not all browser may understand it.
More informations on pointer-events on https://developer.mozilla.org/en/css/pointer-events
The best way would generally be to slice the image up into pieces and place them so that nothing overlays the music player.
Maybe you could use z-index to position the image underneath the player, more on this here: http://www.echoecho.com/csslayers.htm
Put the background image on a div then use z-index to position it behind the player. The advantage of putting a background image on a div and using z-index is that it'll be faster than using an actual inline image.
Clap clap clap to you! I've done sone MySpace tweaking and know it's a real PITA.
Change the CSS here:
#shell {
visibility:hidden;
z-index:200;
}
I don't remember if this is feasible or if they only accept inline CSS.
Not really question related but now you can also have bandpages on facebook via RootMusic. MySpace will probably be overrun in no time so I would also give them a look.
Good luck dealing with the spaghetti tables of MySpace.
Related
I want to be able to take my kingdom of loathing signature that has this code:
<img src="http://sigs.kingdomofloathing.com/player_2192849/mode_bigsig/l1_clan/l2_clantitle/s1_level/s2_class/playerfeed_2192849_bigsig.gif" border="0" />
I want to take the white background of the image and make it transparent. The reason why I can't do this in an image editor is because these signatures update every once in awhile according to what you have been doing in the game.
The simple answer is that you can't do this with CSS and HTML.
Adding transparency to the element with CSS like Frank Tudor stated (via opacity) will affect the entire image.
So really you have three options:
Edit the image using design software like Photoshop, removing the
white bg and saving it out as a trans gif or png.
Utilize CSS opacity, but this will make the entire object transparent. If you're okay with that then this is probably the easiest solution.
Use a scripting language. As others stated you can technically edit images using certain scripting languages like PHP. This will be the most time-consuming/technical way to perform this task (depending on your coding skills).
Hopefully this helps.
If the images are being updated, then it's up to whatever code you are using to dynamically create those images. You should certainly be able to use transparency when creating the images, regardless of how they are made.
I recommend PNG rather than GIF, but either would work.
Post the code of however you generate the signature images, and someone can help you update it to use a transparent background.
There are advanced manipulation functions javascript in one case I remember opacity being used for transparency and in most server-side programming languages you can find image functions.
The problem you face (without an image editor) is that transparency is parameter of the image as it is saved out (and some image types look better than others when it comes to transparency).
You could try this...
Try adding an ID or Class to your IMG tag and this bit of code.
#IDgifThing {
opacity: 0.5; /* 50% transparent */
}
I have not tested it, but I hope it helps you or at least puts your mind in the right direction.
On succession of a previous question I tried to find out if the next thing is possible:
Take you have a render, like a soccer player with a transparant background. You add this render to your html & css. The transparant parts are now part of the image 'box'; you can't click on links under the image transparant parts, but you can see them.
Is it possible to make these links clickable? Thus having the image as highest z-index, but still have the links clickable and working.
(the links have a lower z-index because their background then stops under the image, giving a nicer design)
(Or said otherwise: have a .png image with a transparant background not shown as a box, but as only the colored pixels. Preferable only in html/css)
I think it is not possible, to be honest. If you do not yet understand my question, maybe my previous will help you:
need help fixing the link's clickable area
You can use pointer-events to make an event (click in this case) bubble through to the layer below.
No, it's not possible from what I'm aware of. However you can do similar things to what you want that may be useful:
Turn an area into a link using <map>
Use pointer-events:none so that clicks are ignored on the top element
IE 10 provides the non-standard msElementsFromPoint method that allows you to "peek below" an element; you can do that inside the click handler and determine if the click point overlaps an anchor. If it does, triggering that element's click event would do what needs to be done.
Unfortunately I am not aware of similar functionality for other browsers or earlier versions of IE.
I am trying to create a similar effect as seen here:
http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/
However, I can't seem to get this to work on my page and I would like to apply this effect in a div that contains an image. Is this possible or does everything have to happen on the canvas?
When I try to recreate the effect described in the tutorial I get lots of errors such as variables not being defined etc.
You could re-create this using Canvas, or using CSS transformations and shadows, or a mixture of the two. As for the undefined variables, I can't help as you've not posted your code.
A clean approach would be to do everything within the canvas, using JavaScript. You can draw both the foreground grass, and background mountains to the canvas. However if you want to partly use a <div>, you can overlay the div on top of the canvas using CSS position:fixed or position:absolute, also using CSS z-index to set their order.
I recommend the following link, scroll down for the image drawing:
http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
I don't know how else I can help, as the tutorial that you've provided explains everything quite well. But if you've got any further queries, feel free to comment, or update your question.
You can use the proton particle engine easily achieve the effect you want, Its API is very simple.http://a-jie.github.io/Proton/
The problem I have about using the map & area tag is that I havent been able to find out a solution to having "holes" in the area, for example imagine a lake on map, you dont want that area to be clickable.
Example code:
http://jsfiddle.net/WbKqS/
In this example I have placed 3 lakes on the map but I dont want the lakes to have the hovereffect/being clickable, is this possible? Maybe with another technique?
HTML areas don't support having holes or multiple sets of coords, so you'll need to go with a workaround.
How about a solution based on the approach illustrated below?
I don't think this is a good idea to develope this using area map. I would use Raphael instead. a map example with Raphael
You could position other 'hidden' (div) elements over the lakes, preventing the hover effect from being triggered. Disadvantage is shape of the elements (square). Using canvas could be a solution for that, but not all browsers support it.
I wish it worked that way, but it does not as of right now. Try using SVG format instead. That's Scalable Vector Graphics technology. SVGs support holes and multiple shapes or islands if you will.
Hope this helps, it helped me in Firefox.
If that method fails, I'll look into using <canvas> tag.
I have a piece of Flash on an HTML page that when you hover over it, it expands out to reveal more information.
There are text links that it expands over, however in everything but IE, when it's not expanded those links are still covered by the Flash making them unclickable.
I have the Flash piece in a separate DIV wmode set to transparent.
I know this is possible to make work but for the life of me, I can only get it to work in IE.
Does anyone have any idea of what I'm missing?
Thanks.
I'm a little confused by what you're looking for, so I'll give you a couple of areas to look into. With luck, one of these will get you going, but otherwise, feel free to ask more questions. I'm a little slow on the uptake sometimes....
First off, by default, most browsers place flash files in the uppermost layer. So, the links that you cannot click are stuck in behind your flash presentation - basically, in the eyes of the browser, you are actually clicking on the flash presentation!
This article has some good information on this:
http://kb2.adobe.com/cps/155/tn_15523.html
But basically, you can use a parameter called WMODE in both the object and embed tags. For example, you could implement it like this:
and then add wmode="transparent" into your embed tag.
However, to make it smooth across all browsers (and to make the code a little easier to read/follow), you should also add some z-index values to your stylesheet.
I hope this helps a bit. If not, remember, I'm slow on the uptake....:-)